(jQuery) .hover() 내의 페이드 인/아웃 요소와 관련된 문제

Question

요소가 덮여있을 때 .fadeIn(), .fadeOut() 및 및 .hide()이 올바르게 작동하도록하는 데 문제가 있습니다.

컨테이너가 있다고 가정 해 봅시다. .post-box입니다.

.post-box에는 두 개의 div : .description과 .quote이 포함되어 있습니다. div는 처음에는 보이지 않으므로 .post-box을 가리키면 페이드 인되어 .hide()으로 숨겨진 .description div 대신 사용됩니다.

.post-box이 밖으로 나올 때, .quote은 페이드 아웃되고 .description은 다시 페이드됩니다.

$(document).ready(function() { 
    var description = $('.description'); 
    var quote = $('.quote'); 
    var postBox = $('.post-box'); 

    postBox.hover(function() { 
     $(this).find(description).clearQueue().stop(true, true).hide(0, function() { 
      quote.fadeIn(300); 
     }); 
    }, function() { 
     $(this).find(quote).clearQueue().stop(true, true).fadeOut(300, function() { 
      description.fadeIn(300); 
     }); 
    }); 
}); 

이 개념은 한 가지 문제점을 제외하고는 상당히 잘 작동하고있는 것으로 보입니다. .post-box 위로 빠르게 이동 한 후 빠르게 마우스를 가져간 다음 빠르게 마우스를 올려 놓으면 (see example screenshot here)과 동시에 게재되는 과 .description div가 모두 표시됩니다.

나는 내 기능이 어떻게 설정되었는지에 따라 동시에 발사하는 것을 막고 있다고 생각했지만이 일이 일어나기 위해서는 중요한 것을 놓치고 있어야합니다.

Here is my fiddle so you can see it in action.

누군가가 올바른 방향으로 날 이끌어 주시겠습니까?

Answer 1

내 생각 엔 마우스 오버시 견적 요소에 대한 애니메이션 대기열을 지우는 것입니다.

$(this).find(quote).clearQueue().stop(true, true).hide(); 

.