解决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 29 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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输出xml格式字符串(用的这个)
2012/07/12 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
vue实现浏览器全屏展示功能
2019/11/27 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
基于python中__add__函数的用法
2019/11/25 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
小学生元旦感言
2014/02/26 职场文书
先进员工获奖感言
2014/08/14 职场文书
2015年维修工作总结
2015/04/25 职场文书
培根随笔读书笔记
2015/07/01 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python