jquery hover on/off issue

Question

jQuery를 사용하여 부모 div의 마우스 오버시 div를 숨기고 표시합니다. 그것은 효과가 있지만 유일한 문제는 마우스를 움직이거나 껐을 때 여러 번 반복 할 때까지 몇 번씩 마우스를 가져 가거나 빠르게 움직이면 각 페이드 인 및 페이드 아웃을 반복 실행한다는 것입니다. 참조 : http://api.jquery.com/hover/#hover-handlerIn-handlerOut 첫 번째 예제의 데모는 여기에 몇 시간 동안 마우스를 올리면 실제로 빠르게 볼 수 있으므로 내가 의미하는 바를 볼 수 있습니다.

여기 내 코드입니다. 더 많은 사용자에게 친숙하고 반복적으로 반복하지 않으려면 어떻게해야합니까?

$(".fourth").hover(

    function() { 
     $(this).find('.hide').stop().fadeIn("slow"); ; 
    }, function() { 
     $(this).find('.hide').stop().fadeOut("slow"); 
    } 

); 

자세한 내용은 jQuery .stop() documentation를 참조하십시오

$(function() { 
     $('.hide').fadeOut("fast"); 

     $(".fourth").hover(
      function() { 
       $(this).find('.hide').fadeIn("slow"); ; 
      }, function() { 
       $(this).find('.hide').fadeOut("slow"); 
      } 

     ); 
     <div class="fourth"> 
      <div class="products"> 
       <h4 class="hide"><a href="#">Laern More</a></h4> 
      </div> 
     </div> 

Answer 1

당신은 이전에 시작 애니메이션을 중지 .stop() 함수를 사용해야합니다.

Answer 2

.stop()을 사용하면 현재 실행중인 애니메이션을 중지하고 .fadeToggle()을 사용하면 코드를 간단하게 유지할 수 있습니다.

$(".fourth").hover(function() { 

    $(this).find('.hide').stop().fadeToggle("slow"); 

}); 

FIDDLE.