解决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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 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
星际原理概述
2020/03/04 星际争霸
php 中的str_replace 函数总结
2007/04/27 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
js实现双色球效果
2020/08/02 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python中的魔法方法深入理解
2014/07/09 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
工程师岗位职责
2013/11/08 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
三十年同学聚会感言
2015/07/30 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang