jQuery를 홀수 호버 이벤트

Question

여기 그것은 잘 작동하지만, 신속 이상 및 객체에서 마우스를 가져 가면 때마다 열려 슬라이드 반복적으로 종료 http://jsfiddle.net/AW5BK/2/

$(".feedback").hover(function(){ 
    $(this).animate({marginLeft : "25px"},500); 
    },function(){ 
    $(this).animate({marginLeft : "-25px"},500); 
}); 

내 현재 코드입니다. 그 일을 막을 수있는 방법이 있습니까? 감사합니다

Answer 1

방지 반복적 인 애니메이션 충돌에 대한 사용 stop() :

$(".feedback").hover(function(){ 
    $(this).stop().animate({marginLeft : "25px"},500); 
},function(){ 
    $(this).stop().animate({marginLeft : "-25px"},500); 
}); 

Here is working jsFiddle.

Answer 2

를보다 효율적으로 사용하는 기본 방법

$(".feedback").hover(function(e){ 
    e.stopPropagation(); 
    $(this).animate({marginLeft : "25px"},500); 
},function(){ 
    e.stopPropagation(e); 
    $(this).animate({marginLeft : "-25px"},500); 
}); 

또는 더 나은 - CSS 전환 :

.feedback { 
    transition: all 600ms ease-in-out; 
} 

.feedback:hover { 
    transform: translate3d(-25px, 0, 0); 
} 

두 속성 모두 접두사가 필요합니다. -webkit-, -moz-, -o- 및없이 하나