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 ピクセルまで何かをアニメーション化しています。アニメーションを作成するには、その間に何かが必要です。ゼロ ピクセルから 1 ピクセルに移行するとき、画面に 0.3 ピクセルが表示されることをどのように期待しますか? これが境界線が表示される理由です。0 から 1 までは 1 つのステップにすぎず、実際にアニメーション化することはできません。

于 2013-02-17T14:46:28.577 に答える