解决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 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
教你如何使用php session
2013/10/28 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
简单了解Python生成器是什么
2019/07/02 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
python中温度单位转换的实例方法
2020/12/27 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
高三历史教学反思
2014/01/09 职场文书
物业保安员岗位职责
2014/03/14 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
浅析Django接口版本控制
2021/06/26 Python