在懒人图库中下载了一段jquery的导航菜单代码，使用中发现当鼠标频繁移入移出刚刚打开的菜单时下拉效果会频繁不断的执行，直到执行完刚刚所进行的移入次数。这样就导致动画效果与鼠标动作不一致，效果体验相当不好。查阅jquery帮助文档后发现stop()可以停止执行的动画。
stop()定义和用法：
stop(stopAll,goToEnd) //方法停止当前正在运行的动画。
//stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
//goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。
我选择了使用stop(false, true)，在鼠标移出时停止了动画。但是效果不理想，因为菜单的下拉和收起设置了动画效果，stop后收起的动画消失了。。
再次查阅jquery帮助文档后终于发现了is(":animated")这个小东西来判断元素动画状态。那么我们就可以这样实现：如果鼠标移入时当前元素没有动画效果我们再添加下拉动画。
ok，效果很理想，以下是相关判断代码：
if($(this).find('ul').is(":animated")==false){ //判断元素是否正处于动画状态，如果当前没有进行动画，则添加新动画
$(this).find('ul').slideDown("normal"); //（ms 1500）"slow","normal","fast"
}
例子：
html代码：
| 代码如下 | 复制代码 |
| <li class="skylevel"><a href="#" target="_blank">日志</a> <ul> <li><a href="#" target="_blank">小调子</a></li> <li><a href="#" target="_blank">两句话</a></li> <li><a href="#" target="_blank">网摘</a></li> </ul> </li> <li class="skylevel"><a href="#" target="_blank">业界</a> <ul> <li><a href="#" target="_blank">站长</a></li> <li><a href="#" target="_blank">电商</a></li> <li><a href="#" target="_blank">移动</a></li> <li><a href="#" target="_blank">其它</a></li> </ul> </li> |
|
jq代码：
| 代码如下 | 复制代码 |
| $(document).ready(function(){ $('li.skylevel').mousemove(function(){ if($(this).find('ul').is(":animated")==false){ //判断元素是否正处于动画状态，如果当前没有进行动画，则添加新动画 $(this).find('ul').slideDown("normal"); //（ms 1500）"slow","normal","fast" } }); $('li.skylevel').mouseleave(function(){ $(this).find('ul').slideUp("normal"); }); }); |
|
时间： 2024-10-24 01:22:48