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.
精彩评论