解决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 相关文章推荐
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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
长波知识介绍
2021/03/01 无线电
PHP网上调查系统
2006/10/09 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
jquery cookie插件代码类
2009/05/26 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
Python 面向对象 成员的访问约束
2008/12/23 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
Python函数调用追踪实现代码
2020/11/27 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Python LMDB库的使用示例
2021/02/14 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
18岁生日感言
2014/01/12 职场文书
奠基仪式致辞
2015/07/30 职场文书
公司借款担保书
2015/09/22 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python