jQuery : 빠른 이벤트를 현명하게 소화

Question

그래픽 배경 div에 대해 레이아웃 된 3 개의 텍스트 상자로 구성된 jQuery 구성 요소를 만들었습니다. 각 상자를 가리키면 해당 상자와 관련된 배경 그래픽이 서로 바뀝니다. 애니메이션은 fadeIn/fadeOut 콜백을 사용하여 수행됩니다 (fadeIn은 일단 완료되면 fadeIn이 발생 함).

문제는 상자 # 1에서 상자 # 2까지 마우스를 빠르게 지나치고 상자 # 2와 관련된 이미지 스왑이 불필요하게 작동하고 페이드가로 설정되어 있기 때문에 발생합니다. 부드럽게, 때로는 모든 이미지 스왑이 완료되기까지 꽤 오래 걸립니다. 물론, 평신도 (정규화되지 않은 웹 사용자)의 단어로 말하고 있습니다. jQuery는 '불필요한'것을 알지 못합니다. 내가 진정으로 의미하는 것은 똑똑하고 행동 할 수있는 방법이 있는지 물어 보는 것입니다. - 이름을 짓는다 : - 이벤트를 대기열에 넣고, 새것이 오기 전에 시간에 맞춰서 만들지 않았거나 어쩌면 멈추거나, 아니.

나는 많은 일을하지 않았기 때문에 내 일반적인 질문을 변명합니다. 정말 도움이된다면 몇 가지 샘플 코드를 제공 할 수 있습니다.

감사합니다.

Answer 1

HTML과 자바 스크립트를 제공 한 경우 훨씬 더 구체적으로 조언 할 수 있지만 새로운 애니메이션을 시작하기 전에 .stop(true)을 추가해야 할 수도 있습니다. 이렇게하면 이전 애니메이션이 중지되고 애니메이션 대기열에서 애니메이션이 제거되므로 다음 애니메이션을 바로 시작할 수 있습니다. 대신이의 예를 들어

:

이

$("whatever").fadeIn(); 

당신이 할 것 : 다음 중 하나가 이전하기 전에 시작하면 .stop(true)없이

$("whatever").stop(true).fadeIn(); 

을, 애니메이션 큐에 쌓일 수 있습니다 완료되면 호버에 의해 트리거되는 애니메이션의 경우가 될 수 있습니다.

.stop()에 대한 자세한 내용은 jquery doc을 참조하십시오.