jQuery durağı sonraki bir hemen başlar, böylece çalışan animasyonlar temizlemek için jQuery'nin <code>stop(true, true)</code> yöntemini kullanıyoruz kuyrukta

Question

tüm animasyonlar sonuna atlamak için. İlk parametrenin, clearQueue, tüm animasyon sırasını temizlediğini fark ettim, ancak jumpToEnd ikinci parametresi, yalnızca çalışan animasyonun sonuna atlıyor ve kuyruktan kaldırılanları değil. Sıraya alınmış tüm animasyonların sonuna kadar net ve atlamak için bir yolu var mı?

yerine birkaç stop(false, true) aramaları zincirleme sona erdi, ama bu sadece 3 örneğin, animasyonlar sıraya işleyecektir.

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

Düzenleme: Ben Ateş Göral adlı Yanıt başına kadar, kendi yöntemini stopAll ekleyerek sona erdi

:

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

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

başkası bu yararlı bulur umuyoruz.

Answer 1

JQuery 1.9.

Answer 2

Zincirleme çoklu stop(false, true) mantıklı. Bunun yerine sabit kodlama zincirli aramaların sabit sayıda ki, sıra uzunluğu kontrol edebilir:

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

Gösteri: tam olarak elde .finish() yöntem, kişiye http://jsfiddle.net/AB33X/

Answer 3

Ayrıca da .finish() dokümantasyon sayfasından çeşitli yöntemlerin güzel bir demo vardır

 
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. 

o jQuery 1.9 içinde .finish() metodunun belgelerinden dikkat edin. sınıfının varlığı (vurgulu üzerine ayarlanır ve mouseOut animasyon geri arama ile çıkarılmış) yeni animasyon bakan önce için

Answer 4

test edin. Yeni animasyon başladığında, 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(); 
    }); 
});