解决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里使用Dom操作Xml
Sep 20 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 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 连接mysql连接被重置的解决方法
2011/02/15 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
ipython和python区别详解
2019/06/26 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
2014年机关植树节活动方案
2014/02/27 职场文书
花坛标语大全
2014/06/30 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
丧事主持词
2015/07/02 职场文书
python如何正确使用yield
2021/05/21 Python