解决Jquery鼠标经过不停滑动的问题


Posted in Javascript onMarch 03, 2014

很多情况 Jquery 中 尤其在 鼠标经过的时候会不停的 显示隐藏 html元素。 导致来回隐藏、显示

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".flip").click(function(){ //********问题点在这里,这里没有判断是否处于动画 
$(".panel").slideToggle("slow"); 
}); 
}); 
</script> 
<style type="text/css">

正确的写法应该是下面这样的
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".flip").click(function(){ 
if(!$(".panel").is(":animated")){ //问题点在这里,这里有判断是否处于动画 
$(".panel").slideToggle("slow"); 
} 
}); 
}); 
</script>

或者在滑动之前停止动画队列即可。
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".flip").click(function(){ 
$(this).stop().slideToggle("slow");//stop() 函数停止动画队列。 
}); 
}); 
</script>
Javascript 相关文章推荐
Js的MessageBox
Dec 03 Javascript
js表格分页实现代码
Sep 18 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
js转义字符介绍
Nov 05 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 #Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 #Javascript
JS二维数组的定义说明
Mar 03 #Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 #Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 #Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 #Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 #Javascript
You might like
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
分享php多功能图片处理类
2016/05/15 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python mysql中in参数化说明
2020/06/05 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
中专毕业生自我鉴定范文
2013/11/09 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
大一自我鉴定范文
2013/12/27 职场文书
大学毕业感言
2014/01/10 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
创先争优一句话承诺
2014/05/29 职场文书
小学捐书活动总结
2014/07/05 职场文书
运动会演讲稿50字
2014/08/25 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
撤诉状格式范本
2015/05/19 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python