解决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 相关文章推荐
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
使用Ajax实现进度条的绘制
Apr 07 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python config文件的读写操作示例
2019/09/27 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
Java中实现多态的机制
2015/08/09 面试题
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
迟到检讨书
2015/01/26 职场文书
微信搭讪开场白
2015/05/28 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书