解决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 相关文章推荐
JavaScript 事件对象介绍
Apr 13 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
python中字符串的操作方法大全
2018/06/03 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
基于opencv实现简单画板功能
2020/08/02 Python
介绍一下linux文件系统分配策略
2013/02/25 面试题
致跳远运动员广播稿
2014/02/11 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
网络研修随笔感言
2015/11/18 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP