Jquery框架之所以如此受欢迎是因为他提供了许多功能强大的函数,用这些函数我们很方便的构造各种效果。就像本博客的默认风格中多级菜单的显示,当鼠标移动到菜单上时如果有子菜单,子菜单就会滑出,鼠标移开子菜单滑入,我感觉效果很棒,这些都是jquery的功劳,直接使用slideDown,slideUp函数即可。然而如果仅使用这两个函数会有些瑕疵,因为我们鼠标的移入和移出是瞬间的菜单的滑入和滑出是需要时间的,如果我们快速的多次划过菜单你就会发现当你的鼠标已经离开菜单了,子菜单还在不停地做滑入滑出的动作,完全不顾你的心情。其实这不能怪jquery,因为我么的鼠标事件触发的效果全部存在效果队列里面,如果不清除,子菜单就会把队列中的效果执行完毕。

那有没有清除效果队列的函数呢?当然有,就是stop函数。

函数介绍:

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行

参数说明:

[clearQueue],[gotoEnd]Boolean,BooleanV1.2

clearQueue:如果设置成true,则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。

[queue],[clearQueue],[jumpToEnd]BooleanV1.7

queue:用来停止动画的队列名称

clearQueue:如果设置成true,则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true,则完成队列。可以立即完成动画。

这是jquery的api中的说明,具体在sdlog中的应用看例子:

function bindNav(){
    $('#nav > div > span').mouseenter(function(e){
        $(this).find('div.subNav').stop(true,true).slideDown('normal');
    }).mouseleave(function(e){
        $(this).find('div.subNav').stop(true,true).slideUp('normal');
    });
}

这样写就解决了多次滑入滑出的情况了。更多具体使用方法大家可以参考http://css-tricks.com/examples/jQueryStop/

PS:其实我没发现stop函数之前我一直在怪jquery做的不人性化,看来不是jquery的问题,是我的问题。