루프 방지 jQuery

Question

jQuery를 사용하여 위로 스크롤하기 위해이 스크립트를 만들었지 만 마우스 오버 및 마우스 아웃을 여러 번 수행 할 때마다 마우스를 올릴 때까지 스크립트가 루프로 이동합니다.

내가 이미 솔루션을 검색하려고하지만 난 그것을 밖으로 정렬되지 않은, 여기에 코드입니다 :

$(document).ready(function(){ 

    $('.desc').hide(); 

    $('.work').mouseover(function(){ 
     $('.desc', this).slideDown('900'); 
    }); 

    $('.work').mouseleave(function(){ 
     $('.desc', this).slideUp('900');  
    }); 
}); 

Answer 1

이 .stop()를 사용해보십시오 예고 모두 TRUE로 통과하는 인수, 자사의 웁니다 큐 (읽기 더 자세한 정보는 문서를 참고하십시오). 당신은 인수로 true를 전달 해달라고하면 애니메이션이 대기을 받고 순간 당신은 각각의 애니메이션 (slideUp 및 slideDown) 전에 stop()를 추가 할 필요가

$(document).ready(function(){ 

    $('.desc').hide(); 

    $('.work').mouseover(function(){ 
     $('.desc', this).stop(true,true).slideDown('900'); 
    }); 

    $('.work').mouseleave(function(){ 
     $('.desc', this).slideUp('900');  
    }); 
}); 

Answer 2

에 직면되는 한 같은 행동에 직면하게 될 것이다 실행. 이 작은 함수는 애니메이션 대기열에 새 애니메이션을 추가하기 전에 애니메이션을 정지시킵니다.

Answer 3

각 애니메이션 앞에 stop()을 추가하면 애니메이션 큐가 지워집니다.

$(document).ready(function(){ 

    $('.desc').hide(); 

    $('.work').mouseover(function(){ 
     $('.desc', this).stop().slideDown('900'); 
    }); 

    $('.work').mouseleave(function(){ 
     $('.desc', this).stop().slideUp('900');  
    }); 
}); 

Answer 4

.stop()http://api.jquery.com/stop/ 종이에 도움이되지만 애니메이션은 여전히 ​​육포를 볼 것이다. 실제로 사용자가 .work 요소 위로 "마우스를 가져 가면"애니메이션을 트리거하기 위해 지연된 호버 이벤트가 있습니다. 거기에 몇 가지 jQuery 플러그인이 있습니다. hoverIntent - sample을 사용해보세요. 또는 자신 만의 글을 쓸 수도 있습니다. 그리 어렵지도 않습니다.

또한 FYI 900은 거의 완전한 초입니다. 이는 정중 한 애니메이션보다 길어야합니다.