sky sky - 4 months ago 9
jQuery Question

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

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

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 .

Comments