얼마 동안 jQuery 애니메이션을 무시할 수 있습니까?

Question

예 :

약간의 애니메이션을 지연하는 지연을 사용 http://jsfiddle.net/patrioticcow/XnnvD/4/

하지만, 사용자가 마우스로 검은 이미지를 통해 몇 번을 놓을 때 문제가 발생, 애니메이션을 기억합니다 계속하다.

이것은 흥미로운 효과이지만 내가 원하는 것은 아닙니다. 사용자가 몇 번 움직이면 애니메이션이 발생하지 않도록하고 싶습니다. 잠시 후에 이야기하겠습니다.

Answer 1

마우스 속도가 호버링 할 때까지 애니메이션을 지연시키려는 의도가있는 경우 jQuery HoverIntent plugin을 조사하십시오. 이 플러그인은 마우스가 호버를 암시하기 위해 항목을 충분히 감속시킨 경우에만 호버 콜백을 시작하는 데 사용할 수 있습니다. 이 번호를 포함하고 .hover() 호출을 .hoverIntent() 것으로 바꾸면 사용할 수 있습니다.

Answer 2

stop() jQuery 함수를 사용하십시오.

애니메이션의 "큐업"을 방지하는 데 도움이 될 수 있습니다. 그게 문제인 것처럼 보입니다.

stop의 첫 번째 매개 변수는 대기열을 지우는 것입니다.

$("#someDiv").hover(function(){ 
    $(this).stop(true, false).up); 
}, function() { 
    $(this).stop(true, false).down); 
}); 

더 많은 예제는 Full Cycle of Animation on Hover/Off에 있습니다.

Answer 3

애니메이션 큐 대기를 막기 위해 애니메이션 전에 .stop()을 사용해야합니다.

 $(document).ready(function() { 
      $('ul.anim_queue_example1 a') 
       .hover(function() { 
        $(this).animate({ left: 20 }, 'fast'); 
       }, function() { 
        $(this).animate({ left: 0 }, 'fast'); 
       }); 
     }); 

prevent-animation-queue-buildup

여기에 .stop() 메소드를 이용하여 애니메이션 큐 축적을 해결 갱신 스크립트이다.

$(document).ready(function() { 
     $('ul.anim_queue_example2 a') 
      .hover(function() { 
       $(this).stop().animate({ left: 20 }, 'fast'); 
      }, function() { 
       $(this).stop().animate({ left: 0 }, 'fast'); 
      }); 
    });