Question

<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的animate函数来创建有用的东西。因此，如果您运行我的代码，您可以看到border-left和border-bottom是连续生成的，因为我也在增加宽度和高度。但是在边界右边和边界顶部突然出现之后。我想让它们被动画为左下边框。我该怎么做？

Answer 1

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

Answer 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);

希望这就是你的意思:)。

使用带有border属性的jQuery动画

2 个答案: