slideDown()、slideUp()反复执行的问题
<ul class="main"> <li><a href="#">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> <li><a href="">子菜单3</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> <li><a href="">子菜单3</a></li> </ul> </li> <li><a href="#">菜单三</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> <li><a href="">子菜单3</a></li> </ul> </li> </ul>
stop()方法来停止重复动画 jQuery(document).ready(function($) { $(".main>li").hover(function() { $(this).children("ul").slideDown(); }, function() { $(this).children("ul").stop(true,false).slideUp(); }); });
stop([clearQueue],[jumpToEnd]);
clearQueue:如果设置成true,则清空队列,可以立即结束动画。
jumpToEnd:如果设置成true,则完成队列,可以立即完成动画。可选,默认是false
使用toggle()方法替代 jQuery(document).ready(function($) { $(".main>li").hover(function() { $(this).children("ul").toggle(); }); });