Question

jquery 中使用slideDown()，怎么避免动画重复？？

$('#nav li').hover(function(){ $(this).children('dl').slideDown(300); },function(){ $(this).children('dl').slideUp(300); })如上代码 当鼠标移动很快的时候动画会不停地反复 怎么破？？求解？？

Answer 1

jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行.

其实很简单, 只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过按钮后 0.2 秒, 菜单才会展开, 如果鼠标离开按钮, 展开的处理将被终止. 也就是说, 想要展开菜单鼠标必须有 0.2 秒的事件停留在按钮上, 那么迅速地划过按钮是无法执行展开事件的. 卷起也是如此.

Answer 2

$('#nav li').hover(function(){
$(this).children('dl').stop(true,false).slideDown(300);
},
function(){
$(this).children('dl').stop(true,false).slideUp(300);
})

Answer 3

加一个判断条件is(':animated')试试，应该是可以的

Answer 4

徐总的答案肯定正确啊！