jquery動畫 - 他們什麼時候完成？

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 
     }); 

我想要的動畫simultanusly運行，因此我使用{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

使用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 2

爲什麼不從一個動畫中刪除complete處理程序？

從您發佈的代碼摘錄中，它看起來好像在兩個動畫中使用了相同的持續時間和緩動方法。因此，他們將同時完成，只要他們同時被呼叫，這是固有的真實...

Answer 3

這聽起來像是複雜的東西，但爲什麼不是Deferred Objects？

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

你可以調查更這裏 jQuery animation with deferred pipes?

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);