क्या दो jQuery एनीमेशन एक साथ (ठीक से) चलाने के लिए कोई तरीका है?

Question

मेरे पास एक ईवेंट श्रोता है जो दो एनीमेशन क्रियाओं को कॉल करता है। दुर्भाग्य से उनकी शुरुआत एक छोटी राशि से घिरा हुआ है (उदाहरण के लिए फ़ंक्शन में पहला पहले शुरू होता है)।

क्या कोई उन्हें ठीक से सिंक करने का तरीका जानता है?

$("#nav ul li a").hover(
    function(){ 
     $(lastBlock).children("div").animate({width: "0px"}, { queue:false, duration:400, easing:"swing" }); 
     $(this).children("div").animate({width: maxWidth+"px"}, { queue:false, duration:400, easing:"swing"}); 
     lastBlock = this; 
    } 
); 

क्योंकि पहली एनीमेशन दूसरा पहले थोड़ा चलाता है यह समग्र चौड़ाई क्षण भर के असमान है, जो थोड़ा अजीब लग रहा है हो जाती है,:

यहाँ मेरी कोड है।

Answer 1

jQuery dev सूची पर इस सटीक विषय के बारे में हाल ही में एक चर्चा हुई थी। उन्होंने few test cases बनाया जो आप देखना चाहते हैं। Specially the Johns test.

Here's चर्चा विषय बीटीडब्ल्यू।

Answer 2

चाल एक एकल अंतराल/कॉलबैक है जिसमें सभी तत्व अपडेट किए जाते हैं। आप यहाँ अपनी पोस्ट में एक उदाहरण देख सकते हैं:

Can I implement a callback with each animation step in jQuery?

क्या आप अंत मूल रूप से है:

var el1 = $("#element1"); 
var el2 = $("#element2"); 

var animation = new AnimationTimeline({ 
    easing: "swing" 
    , onstep: function(stepValue, animprops) 
    { 
     // This is called for every animation frame. Set the elements: 
     el1.css({ left: ..., top: ... }); 
     el2.css({ left: ..., top: ... }); 
    } 
    }); 

// And start it. 
animation.start();