Question

下面我有一些jQuery / JS。首先要运行的是最后的警报框。

$(document).ready(function() {
    $("#id1 img , .msg").stop().animate(
        { width: '300px', height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    $(".msg").animate(
        { width: '50px', height: '50px' }, 
        { duration: 498, easing: 'easeOutSine' });
    $("#id1 img").animate(
        { width: '50px', height: '50px' }, 
        { duration: 500, easing: 'easeOutSine' });

    $("#id1 img , .msg").animate(
        { width: '300px',height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    alert('eh?');
});

我有一个easing插件。

如果我运行此警报将显示，然后第一个动画将在后台发生但不会显示。它只会出现在最终尺寸上。

警告不应该在所有动画结束时运行吗？

任何人都可以解释为什么会这样吗？

Answer 1

正如其他评论者所提到的，animate方法是非阻塞的，因此这是正确的行为。如果要在动画结束时调用警报，请查看animate方法的callback参数。文档说明：“动画完成时要执行的函数，对每个动画元素执行一次。”

http://docs.jquery.com/Effects/animate

Answer 2

jQuery animate在动画时不会阻止执行。相反，它只在您调用语句$（）时排队。调用animate。

因此，您的alert（）语句被“首先调用”。但实际上，在alert（）之前调用了animate语句，只有alert（）在动画完成之前阻止了执行。

Answer 3

这个暂停插件表示它在指定的时间内“保留队列中的所有内容”。它实际上不会暂停执行（javascript中没有睡眠）。

所以，这正是预期的事情，警报将首先出现。

Answer 4

就像在代码的开头一样，你有

$(document).ready(function(){

函数表示文档准备就绪后，加载后面的函数。因此，在您运行的动画结束时，您将需要添加另一个函数，告诉它在动画完成后运行警报。这是一个例子：

$(document).ready(function(){ $("button").click(function(){ $("p").animate({width:25},3000,function(){ alert("The paragraph has been animated"); }); }); });

单击按钮时，所有 p 元素的宽度在3秒内缩小到25像素（jQuery以毫秒读取），一旦完成，它就会运行警告的功能“该段落已设置动画”。希望这会有所帮助。

警报箱先运行？

4 个答案: