jQuery issue with slideUp/Down and clearQueue
I have a dropmenu which is shown and hidden (slideUp and slideDown) when hovering over an element using jquery...
$("#element").hover( function() {
$(this).next().clearQueue();
$(this).next().slideDown(); //animate({height:300},100);
}, function() {
if (!$(this).next().is(':hover')) {
$(this).next().clearQueue();
$(this).next().slideUp(); //animate({height:0},100);
}
});
I initially didn't include the line clearQueue() but this caused the slideUp/Down to queue and animate for a long time if the user erratically hovers over and out of #element.
Adding that line means that the dropdown does not fully appear if the user hovers and over and out really quickly.
I can get around this by animating the slideDown but the trouble is I don't know the exact height I need to animate to because it can change.
Is there anyway to stop this behaviour?
Answers:
I had a similar issue with slideUp and slideDown where slideDown would give my element a static height during the animation while the element had to remain dynamically sized since it's contents could change at any time. I fixed that by setting the CSS height value to an empty string (i.e. '') in the animationFinished callback.
So this should solve your problem:
$("#element").hover(function () {
$(this).next().stop(true).slideDown(400, function () { // .stop(true) is basically the same as .clearQueue() except that it only stops and clears animations
$(this).css('height', '');
}); //animate({height:300},100);
}, function () {
if (!$(this).next().is(':hover')) {
$(this).next().stop(true).slideUp(); //animate({height:0},100);
}
});