(jQuery) Problem mit ein-/ausblendbaren Elementen innerhalb von .hover()

Question

Ich habe ein Problem beim Versuch, .fadeIn(), .fadeOut() und .hide() richtig zu verhalten, wenn sich ein Element über ihm befindet.

Nehmen wir an, ich habe einen Container, .post-box.

.post-box enthält zwei Divs: .description und .quote. Die .quote div ist zunächst versteckt, so dass, wenn .post-box über ist, verblasst es und nimmt den Platz der .description div, die mit versteckt wird.

Wenn .post-box nicht mehr vorhanden ist, wird .quote ausgeblendet und .description wird wieder eingeblendet.

$(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); 
     }); 
    }); 
}); 

Es scheint, dass ich dieses Konzept ziemlich gut funktioniert habe, abgesehen von einem Problem. Wenn Sie den Mauszeiger schnell über .post-box bewegen, den Mauszeiger über den Bildschirm bewegen und schnell wieder den Mauszeiger darüber bewegen, werden die beiden divs .quote und .description angezeigt, die gleichzeitig (see example screenshot here) anzeigen.

Ich dachte, ich würde sie daran hindern, gleichzeitig zu feuern, je nachdem, wie meine Funktionen eingerichtet sind, aber ich muss etwas Wichtiges verpassen, damit dies geschieht.

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

Könnte jemand bitte mich in die richtige Richtung führen?

Answer 1

Meine Vermutung wäre, auch die Animationswarteschlange für das Zitatelement bei Hover zu löschen.

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

I've updated the fiddle accordingly.