Why is this jQuery animation jumping up and down?

Question

Javascript:

jQuery(function() {
jQuery("#showquickfind").mouseover( function() {
    jQuery("#quickfind").animate({height:"show",opacity:"show"},"slow");
        return false;
    });
    jQuery("#quickfind").hover( function() {},
        function() { $("#quickfind").animate({opacity:1.0},1125).slideUp(375);
        return false;
    });
});

HTML:

<a href="" id="showquickfind">show me</a>

<div id="quickfind">
    <ul>
        <li>test</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
</div>

CSS is more or less irrelevant. How do I stop the jumping?

Answer 1

You have the same problem I did. What's happening is that your hover event happens, the quickfind slides up, but then it disappears, so it shows again, etc, etc, etc.

The only way I've found to make it stop jumping is to keep a height set on the container element, so that it always stays that height.

Answer 2

You may want to look at chaining the jQuery.stop() command before each animate command. It stops all the currently running animations on the specified elements. i.e.

jQuery("#quickfind").stop().animate({ 
    height:"200px", opacity: 1},"slow"); 
    return false;

Is there a reason you are using jQuery instead of the shorthand $ for the jQuery object? you can use the $ shorthand for the jQuery object, even if using other libraries that use it, by following this pattern-

(function($) {

//Your code here using $ shorthand for jQuery :)

})(jQuery);

This means that $ within the scope of the outer function is a reference for the jQuery object.

I have set up your code on this sample page. If you want to edit it, then add "/edit" to the URL.

Also, Are you sure that "show" is a valid value for height and opacity?

My understanding is that height needs to be set to either auto(i.e. size of containing block), a length or a percentage relative to the containing block, and opacity should be a value between 0 and 1 (jQuery abstracts away differences between browsers and will use whichever opacity attribute is appropriate i.e. opacity or filter:alpha(opacity))

Answer 3

You might want to use the mouseenter event, not mouseover.

The difference is described in the jQuery documentation.

Mouseover fires when the pointer moves into or out from child element, while mouseenter doesn't.

There's also the example how to use it, you have to use the bind() function.

Edit

After all the best solution could be to use hover(), as Russ Cam has mentioned in the comments.

BTW

You're registering the hover-handle multiple times, each time one goes over the "show me"-link.