(jQuery) Issue with fading in/out elements within .hover()

Question

I'm having an issue trying to get .fadeIn() , .fadeOut() , and .hide() to behave properly when an element is hovered over.

Let's say I have a container, .post-box .

.post-box contains two divs: .description and .quote . The .quote div is initially hidden so that when .post-box is hovered over, it fades in and takes the place of the .description div, which gets hidden with .hide() .

When .post-box is hovered out of, .quote fades out and .description is faded in again.

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

It seems that I've got this concept working fairly well except for one issue. If you quickly hover over .post-box , quickly hover out, and then quickly hover over again, you're presented with both the .quote and .description divs showing at the same time (see example screenshot here) .

I thought I was preventing them from firing at the same time based on how my functions are set up, but I must be missing something important for this to be happening.

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

Could somebody please lead me in the right direction?

Answer 1

My guess would be to also clear the animation queue for the quote element on hover.

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

I've updated the fiddle accordingly .