0 
<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之后就会弹出。我希望它们动画为左边框和下边框。我该怎么做？

4

2 回答 2

1

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

于 2013-02-17T14:46:28.577 回答
0

认为我已经为您找到了解决方案。制作相对位置的框，然后将四个 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;
}

查询：

$('#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);

希望这就是你的意思:)

于 2014-03-02T11:03:52.610 回答