Question

我有两个jquery动画：

        books.animate({ left: left1 }, {
            duration: this.slideDuration,
            easing: this.easing,
            complete: complete
        });

        laptops.animate({ left: left2 }, {
            duration: this.slideDuration,
            easing: this.easing,
            complete: complete
        });

我希望动画可以同时运行，因此我使用{queue: false}：

books.animate({ left: left1 }, {
            duration: this.slideDuration,
            easing: this.easing,
                            queue: false,
            complete: complete
        });

        laptops.animate({ left: left2 }, {
            duration: this.slideDuration,
            easing: this.easing,
                            queue: false,
            complete: complete
        });

但是现在完成的回调叫了两次！我怎么知道两个动画到底是什么时候完成的？

Answer 1

为什么不从其中一个动画中删除complete处理程序？

从你发布的代码摘录中，看起来好像你在两个动画上都使用了相同的持续时间和缓动方法。因此，只要他们同时被召唤，它们就会在同一时间完成，这本来就是真的......

Answer 2

这可能听起来很复杂，但为什么不Deferred Objects？

http://api.jquery.com/category/deferred-object/

您可以在此处进行更多调查 jQuery animation with deferred pipes?

Answer 3

使用jQuery延迟方法尝试

$.when( 
    books.animate({ left: left1 }, {
        duration: this.slideDuration,
        easing: this.easing
    }),
    laptops.animate({ left: left2 }, {
        duration: this.slideDuration,
        easing: this.easing
  })
).done( function( ) {

    alert("done!");

});

小提琴here

Answer 4

根据http://darcyclarke.me/development/using-jquery-deferreds-with-animations/：

books.animate({ left: left1 }, {
    duration: this.slideDuration,
    easing: this.easing,
    queue: false
});

laptops.animate({ left: left2 }, {
    duration: this.slideDuration,
    easing: this.easing,
    queue: false
});

$.when(books, laptops).done(complete);

jquery动画 - 什么时候完成？

4 个答案: