làm thế nào để animate hai điều cùng một lúc trong jquery

Question

Tôi muốn làm sống động 2 điều cùng một lúc khi di chuột một cái gì đó. Ví dụ:

ví dụ: tôi muốn thay đổi màu nền của box1 bằng id = "box1" và vị trí của box2 với id = "box2" khi di chuột lên div có id = "trigger".

nhưng tôi không muốn chúng hoạt ảnh trong hàng đợi, ví dụ như cái khác. Tôi muốn họ bắt đầu hoạt hình cùng một lúc và kết thúc cùng một lúc!

Answer 1

Bạn chỉ có thể chạy chúng trong một hàng, như thế này:

$("#trigger").hover(function() { 
    $("#box1").stop().animate({ backgroundColor: '#000000' }); 
    $("#box2").stop().animate({ top: "-20px" }); 
}, function() { 
    $("#box1").stop().animate({ backgroundColor: '#FFFFFF' }); //set it back 
    $("#box2").stop().animate({ top: "0px" });     //set it back 
}); 

này sử dụng .hover() animate đối phương khi lơ lửng, và animate họ lại khi rời khỏi. Các .stop() chỉ là để ngăn chặn hàng đợi hoạt hình xây dựng. Để tạo hiệu ứng cho một màu, bạn cũng cần có cả the color plugin hoặc jQuery UI.

Animations trong jquery, .animate(), are implemented sử dụng setInterval() với một bộ đếm thời gian 13ms, do đó họ sẽ xảy ra bên ngoài dòng chảy bình thường ... làm cho họ như trên không chờ đợi là người đầu tiên kết thúc, họ sẽ chạy cùng một lúc.

Answer 2

Khi hoạt ảnh đầu tiên bắt đầu, dòng mã tiếp theo sẽ thực thi mà không cần đợi hoạt ảnh kết thúc.

Vì vậy, để làm hai việc cùng một lúc:

$('#trigger').hover(function() 
{ 
    $('#box1').animate({ ... }); 
    $('#box2').animate({ ... }); 
}); 

Answer 3

Check-out jQuery.animate() docs. Có thuộc tính queue:

queue: Boolean cho biết có đặt hoạt ảnh trong hàng đợi hiệu ứng hay không. Nếu false, hoạt ảnh sẽ bắt đầu ngay lập tức.

Answer 4

Trong khi đúng là các cuộc gọi liên tiếp đến animate sẽ cung cấp hình thức chúng đang chạy cùng lúc, sự thật cơ bản là chúng hoạt ảnh riêng biệt chạy rất gần song song.

Để đảm bảo các hình ảnh động đang thực sự chạy ở việc sử dụng cùng một lúc:

$('#trigger').hover(function() { 
    $('#box1').animate({..., queue: 'trigger-hover'}); 
    $('#box2').animate({..., queue: 'trigger-hover'}).dequeue('trigger-hover'); 
}); 

hình ảnh động thêm có thể được bổ sung vào 'cò-hover' hàng đợi và tất cả có thể được bắt đầu cung cấp các hình ảnh động cuối cùng dequeue là họ.

Chúc mừng, Anthony