Question

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?

Answer 1

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