I did a long time site http://artpk.net/ , tried to make smooth effects when you hover on the drop-down menu.

$('li').has('ul').mouseover(function() { $(this).children('ul').show(); }).mouseout(function() { $(this).children('ul').hide(); });

If I put show (200) then when you hover the menu, it behaves inadequately, just show () is normal. Now I am also confronted with the fact that I need to make a smooth menu, but I still do not understand how to make it behave normally. Tell me please!

  • As for me, so normal menu. - Smash
  • Yes, the menu is normal. but I want it to pop up slowly, and not appear abruptly) - chuikoff

2 answers 2

Try using .stop() .

 $('li').has('ul').mouseover(function(){ $(this).children('ul').stop().show(300); }).mouseout(function(){ $(this).children('ul').stop().hide(300); });

And here's a working jsFiddle example

EDIT:

jsFiddle example with 2 menu items.

  • and if so: http://jsfiddle.net/heUYB/3/ - Specter
  • And so everything works fine, you did not hang float: left; on the second menu item. jsfiddle.net/oburejin/heUYB/4 Do not confuse people =) - oburejin
  • your "example with 2 menu items." generally non-working, because the selector li > ul not equivalent to $('li').has('ul') - Specter
  • one
    Wrong link. Corrected the answer. - oburejin
  $('li').hover(function(){ $('ul:first',this).slideToggle(); });​
  • jsfiddle.net/shanhaichik/AhSET/1 - shanhaichik
  • 2
    .stop () still needs to be hung up, otherwise the animations will add up. Try to quickly move the points. - oburejin
  • Thank you so much for .stop () I hang it before the animation starts, and it behaves adequately !!! Hooray! I'm happy! Thank! - chuikoff