Có cách nào để làm cho hai hoạt ảnh jQuery chạy (đúng cách) đồng thời không?

Question

Tôi có trình xử lý sự kiện gọi hai hành động hoạt ảnh. Thật không may, bắt đầu của họ được so le bởi một lượng nhỏ (ví dụ như số tiền đầu tiên trong hàm bắt đầu trước).

Có ai biết cách để đồng bộ hóa đúng cách không?

Dưới đây là mã của tôi:

$("#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; 
    } 
); 

Bởi vì phim hoạt hình đầu tiên chạy hơi trước khi thứ hai, nó làm cho chiều rộng tổng thể để trở nên trong giây lát bất bình đẳng, trông một chút sôi nổi.

Answer 1

Đã có một sự xáo trộn gần đây về chủ đề chính xác này trong danh sách phát triển jQuery. Họ đã tạo một số few test cases mà bạn có thể muốn xem. Specially the Johns test.

Here's chủ đề thảo luận btw.

Answer 2

Bí quyết là có một khoảng thời gian/gọi lại duy nhất trong đó tất cả các phần tử được cập nhật. Bạn có thể tìm thấy một ví dụ trong bài viết của tôi ở đây:

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

gì bạn kết thúc về cơ bản là:

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