jQuery Queuing Animations

Question

세 개의 이미지가 있고 다음 코드를 사용하여 마우스 롤오버에서 페이드 인합니다.

$(".thumbs img").fadeTo("slow", 0.3); 

$(".thumbs img").hover(function(){ 
    $(this).fadeTo("normal", 1.0); 
},function(){ 
    $(this).fadeTo("slow", 0.3); 
}); 

문제는 당신이 그들에 몇 번 마우스를 롤 때 그들이 거기에 끌 나이 때문에 동안 깜박 앉아 있다는 것입니다 (그들은 클래스 '엄지 손가락'과 자신의 사업부에서 모두)마다 하나 이상의 마우스를 굴리면 일종의 대기열에 효과가 추가됩니다. 그것이 실제로 일어날 때 더러워 보입니다. 이것을 방지 할 수있는 방법이 있습니까?

Answer 1

이것을 방지하는 가장 좋은 방법은 애니메이션을 시작하기 전에 Stop()을 추가하는 것입니다. 따라서 코드는 다음과 같습니다.

$(".thumbs img").stop().fadeTo("slow", 0.3); 

$(".thumbs img").hover(function(){ 
    $(this).stop().fadeTo("normal", 1.0); 
},function(){ 
    $(this).stop().fadeTo("slow", 0.3); 
});