(jQuery) Проблема с затухающими элементами ввода/вывода внутри .hover()

Question

У меня возникла проблема с попыткой получить .fadeIn(), .fadeOut() и .hide(), чтобы правильно вести себя, когда элемент завис.

Предположим, у меня есть контейнер, .post-box.

.post-box содержит два подраздела: .description и .quote. Окно .quote изначально скрыто, так что, когда .post-box зависнет, он исчезает и заменяется на .description div, который скрывается с .hide().

Когда .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, быстро наведите курсор мыши, а затем быстро наведите курсор мыши, вы увидите как .quote, так и .description divs, показывающие одновременно (see example screenshot here).

Я думал, что я мешал им стрелять одновременно, основываясь на том, как мои функции настроены, но я должен упустить что-то важное для этого.

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

Может кто-нибудь, пожалуйста, привести меня в правильном направлении?

Answer 1

Мое предположение было бы также очистить очередь анимации для элемента quote при наведении.

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

I've updated the fiddle accordingly.