jQuery 반복 호버 효과

코드에서 두 번 이상 마우스를 굴릴 때마다 이상한 문제가 있습니다. 링크가 너무 오래 호버링 효과를 지속하고 반복 적용됩니다. jquery가 마우스를 놓은 상태에서 강조 표시되도록 마우스를 올려 놓으면 jquery가 클래스를 변경합니다.jQuery 반복 호버 효과

$(document).ready(function() { 
    $('.hover').hover(function() { 
     $(this).switchClass('hover', 'hover-on', 250); 
    }, function() { 
     $(this).switchClass('hover-on', 'hover', 250); 
    }); 
})

그리고 CSS 클래스는 단순히 다른 배경 색상을 포함 :

<ul>   
    <li><a href="#" class="current">Home</a></li>  
    <li><a href="#" class="hover">News</a></li>  
    <li><a href="#" class="hover">Media</a></li>  
    <li><a href="#" class="hover">About</a></li> 
</ul>

이

는 jQuery 코드입니다.

내가 무슨 뜻인지 알기 위해 아래 링크를 사용해보십시오. 동작을 설명하는 방법을 모르겠습니다. 몇 번 마우스를 가져 가면 각 링크를 몇 번 마우스를 앞뒤로 움직일 수 있습니다. http://74.63.212.104/nav/

출처

2012-02-12 Will T.

스위치 클래스 앞에 .stop()을 추가하면 – Cristy

은 각'.switchClass' 호출 후에'return false; '를 추가합니다. –

'.stop()'은 현재의 애니메이션을 직접 멈추게합니다. –

애니메이션을 시작하기 전에 jQuery .stop()을 구현하면 해당 요소의 애니메이션 대기열에 남아있는 모든 항목이 지워집니다.

$(document).ready(function() { 
    $('.hover').hover(function() { 
     $(this).stop(true, false).switchClass('hover', 'hover-on', 250); 
    }, function() { 
     $(this).stop(true, false).switchClass('hover-on', 'hover', 250); 
    }); 
});

편집 :

설명 .stop()의 파라미터를

.stop([clearQueue] [, jumpToEnd])

clearQueue -뿐만 아니라 대기 애니메이션을 제거할지 여부를 나타내는 부울. 기본값은 false입니다.

jumpToEnd - 현재 애니메이션을 즉시 완료할지 여부를 나타내는 부울입니다. 기본값은 false입니다.

출처

2012-02-12 19:01:23 Sparky

감사! 이것은 효과적이고 거짓 매개 변수를 교환해야했습니다. 그게 정확히 제가 찾고 있었던 것입니다! –

jQuery 반복 호버 효과

답변

관련 문제