호버를위한 jQuery 애니메이션

Question

앵커 요소 위로 마우스를 가져 가면 로고에 애니메이션을 적용하려고합니다. 로고 위로 마우스를 가져 가면 이미지가 위쪽으로 이동해야하고 다른 하나는 아래쪽으로 이동해야합니다. 마우스를 놓으면 다른 방향으로 가야합니다. 현재 요소 (2 번째)는 위쪽으로 이동해야하며, 첫 번째 요소가 아래쪽으로 이동해야합니다.

나는 이것을 움직이는 방법을 알고 있지만 앵커 요소 위에 정말로 빠르게 마우스를 가져 가면 문제가 발생합니다. 때로는 두 이미지 (첫 번째 & 두 번째 나타나는 등)

이것은 내가 이미 얻은 것입니다. 어떻게해야합니까?

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    logo.unbind('mouseleave', outHandler); 
    brush.animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     house.animate({ 
      "top": "42px" 
     }, 250,function(){ 
      logo.bind('mouseleave', outHandler); 
     }); 
    } 
    ); 
} 
var outHandler = function() { 
    logo.unbind('mouseenter', inHandler); 
    house.animate({ 
     "top": "-21px" 
    }, 250, function() { 
     brush.animate({ 
      "top": "39px" 
     }, 250,function(){ 
      logo.bind('mouseenter', inHandler); 
     }); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

내 질문에 대한 정답 후에, 나는 다음 코드를 사용하여이 문제를 해결하기 위해 관리 :

function logoAnimation() { 
var logo = jQuery('#logo a'); 
var house = jQuery('#logo_icon_house'); 
var brush = jQuery('#logo_icon_brush'); 

var inHandler = function() { 
    if(brush.is(':animated')) { 
     return; 
    } 
    brush.stop(true,true).animate({ 
     "top": "-27px" 
    }, 250, function(){ 
     if(house.is(':animated')) { 
      return; 
     } 
     house.animate({ 
      "top": "42px" 
     }, 250); 
    } 
    ); 
} 
var outHandler = function() { 
    house.stop(true,true).animate({ 
     "top": "-21px" 
    }, 250, function() { 
     if(brush.is(':animated')) { 
      return; 
     } 
     brush.animate({ 
      "top": "39px" 
     }, 250); 
    }); 
} 

logo.mouseenter(inHandler).mouseleave(outHandler); 
} 

Answer 1

당신이 (체인 내에서) .animate()를 호출하기 전에 어느 .stop(true, true)를 호출해야하거나 수 같은 성명을 작성하십시오.

brush.stop(true, true).animate({}); // ... 

이렇게하면 새 애니메이션을 시작하기 전에 모든 애니메이션이 brush에서 중지됩니다. .stop()의 매개 변수는 "CleartQueue"및 "JumpToEnd"입니다.

현재 애니메이션이없는 경우 .animate() 만 호출됩니다.

참고 : .stop(), :animated