解决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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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创建PDF中文文档
2006/10/09 PHP
php 获取全局变量的代码
2011/04/21 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
django中的setting最佳配置小结
2017/11/21 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
实习生自我鉴定范文
2013/12/05 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
五一放假通知怎么写
2015/08/18 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android