开发者

jQuery help with jumpy slidedown menu

开发者 https://www.devze.com 2023-02-17 01:34 出处:网络
I have this code written in jQuery to have a simple on hover slide down menu.It works, however it is sometimes very jumpy.When you slide your mouse over it at a certain spot or a bit fast, it will jum

I have this code written in jQuery to have a simple on hover slide down menu. It works, however it is sometimes very jumpy. When you slide your mouse over it at a certain spot or a bit fast, it will jump open/close and flicker...not sure how to remedy that?

Here is my current code:

this.navLi = jQuery('nav ul li').children('ul').css("display","block").hide().end();
this.navLi.hover(function() {
    // mouseover
    jQuery开发者_JS百科(this).find('> ul').stop(true, true).slideDown(100);
}, function() {
    // mouseout
    jQuery(this).find('> ul').stop(true, true).slideUp(100);
});


I recommend you try out the hoverIntent plugin. It works quite well for things like this.

Here's an example on jsFiddle. It fits quite well into how you've set up your code.

And just a note, your first selector is looking for a tag <nav> is that correct?

Example
HTML

<div id="nav">
    <ul>
        <li class="head">
            First
            <ul>
                <li>1.1</li>
                <li>1.2</li>
            </ul>
        </li>
        <li class="head">
            Second
            <ul>
                <li>2.1</li>
                <li>2.2</li>
            </ul>
        </li>

    </ul>
</div>

Javascript

jQuery(function() {
    this.navLi = jQuery('#nav ul li').children('ul').css("display","block").hide().end();
    this.navLi.hoverIntent(function() {
        // mouseover
        jQuery(this).find('> ul').slideDown(100);
    }, function() {
        // mouseout
        jQuery(this).find('> ul').slideUp(100);
    });
});

CSS

#nav, #nav ul { list-style: none; }
#nav, #nav * { padding: 0; margin: 0; }
li.head { width: 100px; float: left; border: 1px black solid; }


That's the effect of the second true (parameter) in the stop method, from the documentation:

.stop( [ clearQueue ], [ jumpToEnd ] )
clearQueueA Boolean indicating whether to remove queued animation as well. Defaults to false. jumpToEndA Boolean indicating whether to complete the current animation immediately. Defaults to false.

Just remove the second parameter and see if this is what you want.

0

精彩评论

暂无评论...
验证码 换一张
取 消