解决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 遍历验证所有文本框的值
Aug 27 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
小程序实现图片预览裁剪插件
Nov 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
PHP实现搜索相似图片
2015/09/22 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
认识less和webstrom的less配置方法
2017/08/02 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
微信小程序签到功能
2018/10/31 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
介绍下static、final、abstract区别
2015/01/30 面试题
护理自荐信范文
2013/10/05 职场文书
建筑学推荐信
2013/11/03 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
英文升职感谢信
2015/01/23 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
小学运动会加油词
2015/07/18 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫