解决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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
vue transition 在子组件中失效的解决
Nov 12 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP数组实例总结与说明
2011/08/23 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
Javascript的this详解
2019/03/23 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python 元组操作总结
2019/09/18 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
postman和python mock测试过程图解
2020/02/22 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
实用求职信范文分享
2013/12/25 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python