Dừng jQuery (true, true) để nhảy đến cuối tất cả các hình động trong hàng đợi

Question

Tôi đã sử dụng phương thức stop(true, true) của jQuery để xóa hoạt ảnh đang chạy để ảnh tiếp theo bắt đầu ngay lập tức. Tôi nhận thấy rằng tham số đầu tiên, clearQueue, xóa toàn bộ hàng đợi hoạt ảnh nhưng tham số thứ hai, jumpToEnd, chỉ nhảy tới cuối hoạt ảnh hiện đang chạy chứ không phải các thông số đã bị xóa khỏi hàng đợi. Có cách nào để làm cho nó rõ ràng và nhảy đến cuối của tất cả các hình ảnh động xếp hàng?

Tôi đã kết thúc chuỗi một số cuộc gọi stop(false, true) thay vào đó, nhưng điều này sẽ chỉ xử lý 3 hình động được xếp hàng đợi, ví dụ:

$(this) 
    .stop(false, true) 
    .stop(false, true) 
    .stop(false, true) 
    .addClass('hover', 200); 

Edit:

tôi đã kết thúc thêm phương pháp của riêng tôi, stopAll, như mỗi câu trả lời Ates Goral của:

$.fn.extend({ stopAll: function() { 
    while (this.queue().length > 0) 
     this.stop(false, true); 
    return this; 
    } }); 

$(this).stopAll().addClass('hover', 200); 

Tôi hy vọng ai đó tìm thấy hữu ích này.

Answer 1

jQuery 1.9 giới thiệu các phương pháp .finish(), mà đạt được chính xác điều đó.

Answer 2

Chaining multiple stop(false, true) có ý nghĩa. Thay vì cứng mã hóa một số cố định của các cuộc gọi bị xiềng xích, bạn có thể kiểm tra chiều dài hàng đợi:

while ($(this).queue().length) { 
    $(this).stop(false, true); 
} 

Demo: http://jsfiddle.net/AB33X/

Answer 3

Tôi cũng nhận thấy từ các tài liệu của phương pháp .finish() trong jQuery 1.9 rằng

 
Animations may be stopped globally by setting the property $.fx.off 
to true. When this is done, all animation methods will immediately 
set elements to their final state when called, rather than displaying an effect. 

Ngoài ra còn có một bản demo tốt đẹp của các phương pháp khác nhau trên trang .finish() tài liệu.

Answer 4

Kiểm tra sự hiện diện của lớp học (được đặt khi di chuột và bị xóa trên mouseOut gọi lại động) trước khi bắt đầu hoạt ảnh mới. Khi hình động mới bắt đầu, dequeue.

$("div").hover(function(){ 
    if (!$(this).hasClass('animated')) { 
     $(this).dequeue().stop().animate({ width: "200px" }); 
    } 
}, function() { 
    $(this).addClass('animated').animate({ width: "100px" }, "normal", "linear", function() { 
     $(this).removeClass('animated').dequeue(); 
    }); 
});