mouseout시 jQuery 호버 기능 대기열을 중지하려면 어떻게합니까?

Question

나는 두 가지 이미지와 짧은 바이오가 특정 방식으로 표시되기를 원하는 회사의 약 섹션을 만들고 있습니다. 아이디어는 그들의 헤드 샷이 그리드에 표시 될 것이고, 당신이 머릿속 위로 마우스를 가져 가면 그림이 바뀌고 오버레이가 드롭 다운되고 짧은 바이오 페이딩이 일어납니다. 마우스가 섹션을 벗어나면 같은 순서가 역순으로 발생합니다.

jQuery를 사용하여이 기능을 구현했지만 기능 대기열에 문제가 있습니다. 함수 대기열이 완료되기 전에 마우스가 섹션을 빠져 나올 수 있도록 이미지 위로 빠르게 가져 가면 모든 구타가 제거됩니다. (아래의 jsfiddle 예제를 사용하고 이미지를 빠르게 마우스를 움직여 내가 무슨 뜻인지 알 수 있습니다.)

여러 가지 방법으로 .stop() 함수를 사용해 보았지만 성공하지 못했습니다. 이 문제에 처음으로 접하는 것이므로이 특정 문제와 관련하여 많은 부분을 발견하지 못했기 때문에이를 구축하는보다 효율적인 방법이 있는지 궁금합니다. 어떤 도움이라도 대단히 감사하겠습니다!

가 여기 내 기본 jQuery를

$(document).ready(function(){ 

$("li.member").hover(function(){ 
     var thisInHover = this; 
     $(thisInHover).find("li.member-monster").stop().fadeIn('slow', function(){ 
      $(thisInHover).find("li.member-overlay").stop().slideDown('slow', function(){ 
       $(thisInHover).find("li.member-description").stop().fadeIn('slow'); 
      }); 
     }); 

}, function(){ 

     var thisInHover = this; 

     $(thisInHover).find("li.member-description").fadeOut('slow', function(){ 
      $(thisInHover).find("li.member-overlay").slideUp('slow', function(){ 
       $(thisInHover).find("li.member-monster").fadeOut('slow'); 
      }); 
     }); 
    }); 
}); 

입니다 그리고 여기 지금 내가 무엇을의 작업 예제 ->http://jsfiddle.net/jumplikeaginger/6pzjh4sn/

Answer 1

추가 정지()뿐만 아니라 hoverout합니다 :

http://jsfiddle.net/6pzjh4sn/1/

$(document).ready(function(){ 

    $("li.member").hover(function(){ 
      var thisInHover = this; 
      $(thisInHover).find("li.member-monster").stop().fadeIn('slow', function(){ 
       $(thisInHover).find("li.member-overlay").stop().slideDown('slow', function(){ 
        $(thisInHover).find("li.member-description").stop().fadeIn('slow'); 
       }); 
      }); 

    }, function(){ 

      var thisInHover = this; 

      $(thisInHover).find("li.member-description").stop().fadeOut('slow', function(){ 
       $(thisInHover).find("li.member-overlay").stop().slideUp('slow', function(){ 
        $(thisInHover).find("li.member-monster").stop().fadeOut('slow'); 
       }); 
      }); 

     }); 

});