使用带有边框属性的jQuery动画答案

【问题标题】：Using jQuery animate with border attribute使用带有边框属性的jQuery动画
【发布时间】：2013-02-17 14:43:28
【问题描述】：

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--<SCRIPT type="text/javascript" src="jquery-1.8.3.min.js"></SCRIPT>-->
        <SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></SCRIPT>
        <style type="text/css">
            #content {
                border:0px solid #ff9999;
                width:0px;
                height:0px;
                padding:3px;
            }
        </style>
    </head>

    <body>
        <input id="btn" type="button" value="Animate"/>
        <div id="content"></div>
    </body>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('#content')
                .animate({
                    "borderLeftWidth":"1px",
                    "height":"400px"

                },1000)
                .animate({
                    "borderBottomWidth":"1px",
                    "width":"400px"
                },1000)
                .animate({"borderRightWidth":"1px"
                },1000)
                .animate({"borderTopWidth":"1px"
                },1000)
            });
        });
    </script>
</html>

我正在尝试通过使用 jQuery 的动画功能来做一些有用的事情。因此，如果您运行我的代码，您会看到border-left 和border-bottom 是连续生成的，因为我也在增加宽度和高度。但是在那个border-right和border-top之后就会弹出来。我希望它们动画为左边框和下边框。我该怎么做？

【问题讨论】：

标签： jquery

【解决方案1】：

您正在制作从零像素到一像素的动画，并且要获得动画必须介于两者之间。当从无像素变为 1 像素时，您如何期望屏幕显示 0.3 像素？这就是为什么边框刚刚出现的原因，从零到一只是一步，你不能真正为它设置动画！

【讨论】：

那么这是不可能的吗？有没有办法做到这一点？
这不是为边框的宽度设置动画。我想让边框变成一个正方形。从一个点开始，然后增加直到它变成一个正方形。
如果您正在考虑诸如边框之类的东西在某一时刻开始变得可见，然后像一条正在生长的蛇一样在元素周围移动，那是不可能的。好吧，一切皆有可能，只是没那么容易！
嗯，这正是我的想法。无论如何，谢谢。我会不择手段地尝试 :)
可以做到，但不是真的有边框。您必须使用元素，并准确定位它们，然后为宽度或高度设置动画以获得该效果，并且您可能会收集到这将是一些复杂的东西。这些天在 CSS3 中发生了很多事情，但我还没有真正看到过这样的事情。

【解决方案2】：

认为我已经为您找到了解决方案。使框的位置相对，然后将四个div放在“绝对”中，如下所示：

html：

<div id="my_contents">
    <div id="border_top"></div>
    <div id="border_right"></div>
    <div id="border_bottom"></div>
    <div id="border_left"></div>
</div>

css：

#my_contents {
    position: relative;
    width: 200px
    height: 200px
}

#border_top {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    border-top: 1px solid #000;
}

#border_right {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 0;
    border-right: 1px solid #000;
}

#border_bottom {
    position: absolute;
    bottom: 0px;
    left: 200px;
    width: 200px;
    height: 1px;
    border-bottom: 1px solid #000;
}

#border_left {
    position: absolute;
    left: 0px;
    top: 200px;
    width: 1px;
    height: 200px;
    border-left: 1px solid #000;
}

JQuery：

$('#border_top').animate({'width':'200px'}, 1200);
$('#border_right').delay(1200).animate({'height':'200px'}, 1200);
$('#border_bottom').delay(1800).animate({'left':'0'}, 1200);
$('#border_left').delay(2400).animate({'top':'0'}, 1200);

希望这就是你的意思:)

【讨论】：