0 
    <!DOCTYPE html>

    <html>

    <head>

        <link rel="stylesheet" href = "login.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script>

            var swidth = $(window).width();
            var sheight = $(window).height();

            $(document).ready(function(){


                $("#box").animate({ 

                    top: (sheight*0.22)+"px",
                    left: (swidth*0.25)+"px",
                    width:(swidth*0.3)-40+"px",
                    height: (sheight*0.35)-40+"px",

                }, 2000, function(){

                    $('<input type="button" value="My button">').appendTo(this)
                    .button().click(function(){ 

                        alert('I was clicked!');

                    });
                });


                });

        </script>

    </head>

    <body>

        <header>    

        </header>

        <section>

            <div id="box"> 
            </div>


        </section>

    </body>

    </html>

我希望如此，因为我在 '.animate. 它会等到动画完成。但没有运气。

问题是动画开始时 div 非常小，因此按钮几乎无法放入 div 中，这看起来很糟糕。所以我只希望按钮在动画完成并且 div 处于全尺寸后出现。

感谢您提前提供任何答案。

4

2 回答 2

1

当异步动画开始时，代码没有理由停止。

您必须在完成回调中进行附加，该回调在动画完成时执行：

$("#box").animate({ 
        top: sheight*0.22+"px",
        left: swidth*0.25+"px",
        width: swidth*0.3+"px",
        height: sheight*0.35+"px",
}, 2000, function(){
      $('<input type="button" value="My button">').appendTo(this)
      .button().click(function(){ 
           alert('I was clicked!');
      });
});

请注意，我还更改了附加代码。您将buttonandclick函数应用于#box元素，而不是新输入。

编辑 ：

现在您显示了代码，可以看出您没有导入 jQuery UI。你必须做。见http://learn.jquery.com/jquery-ui/getting-started/

于 2013-08-16T17:02:06.253 回答
1

使用完成回调

var swidth = $(window).width();
var sheight = $(window).height();

$(document).ready(function(){


    $("#box").animate({ 

        top: sheight*0.22+"px",
        left: swidth*0.25+"px",
        width: swidth*0.3+"px",
        height: sheight*0.35+"px"
    }, 2000, function(){
        function(){
            $(this).append('<input type="button" value="My button">').button().click(function(){ 
                alert('I was clicked!');
            });
        }
    } )



});
于 2013-08-16T17:02:24.807 回答