다른 애니메이션이 시작될 때 애니메이션 기능이 중지됩니다.

Question

mouseenter과 mouseleave에 대해 하나씩 다른 두 가지 기능이 있습니다.

첫 번째는 블록을 표시하고 두 번째는 숨 깁니다 (둘 다 애니메이션 사용).

mouseenter 안에 애니메이션이 들어가기 전에 mouseleave이 시작될 수 있습니다.

이 경우 블록이 여러 번 깜박입니다.

mouseleave이 시작될 때 mouseenter 함수 내부의 애니메이션을 중단하고 싶습니다.

어떻게 하시겠습니까?

Answer 1

각 애니메이션 기능 앞에 .stop()을 삽입하십시오. 예컨대 : 현재 애니메이션되지

$(this).stop().slideDown(); 
$(this).stop().slideUp(); 

$(this) 경우, .stop() 단순히 아무것도하지 않는 것입니다.

---

참고 : 당신은 표준 슬라이드에 문제가 발생하고 .stop()와 함께 사용하면 기능을 퇴색 할 수있다 - 이러한 요소가 완전히에 애니메이션 마지막 높이/불투명도를 기억한다. 따라서 .stop().slideUp()이 호출되기 전에 요소가 높이가 50 %에 도달 한 경우 다음 .slideDown()은 애니메이션을 50 % 높이로만 만듭니다. 다시 입력하기 전에 마우스를 빠르게 움직이면서 밖으로 움직여 이런 일이 일어나면 here을보십시오.

jQuery 설명서에 반 완료 애니메이션이 최종 위치로 점프하는 .stop(true, true)을 사용하는 것이 좋습니다. 물론 이것은보기 흉한 "플래시"를 만듭니다. http://jsfiddle.net/Stwnv/ :

$(this).stop().animate({height: 100}); 
$(this).stop().animate({height: 0}); 

이 데모를 참조하십시오

나는 완전히 .slideUp() 또는 .fadeIn()을 피하고, 예컨대에 애니메이션을 할 수있는 특정 높이/불투명도를 설정하는 것이 좋습니다.