jquery防止重复执行动画避免页面混乱

最近开发前台页面的时候遇到一个问题。juery时候mouseover……或者其他事件，发现鼠标滑动过快导致动画重复执行，以至于页面乱了。

解决办法：

可以先判断一下元素是否处于动画中。
如：


代码如下:

if(!$(".content").is(":animated")){
//元素不处于动画中执行。
}

赞 (0)

相关推荐

  • jQuery动画特效实例教程

    jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法.分享给大家供大家参考之用.具体方法如下: 1.自制折叠内容块 内容块如下: <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this mo

  • jQuery动画出现连续触发、滞后反复执行的解决方法

    本文实例讲述了jQuery动画出现连续触发.滞后反复执行的解决方法.分享给大家供大家参考.具体分析如下: jQuery中slideUp .slideDown.animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅. 则解决办法: 1.在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout) 2.在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop) jquery sto

  • JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

  • 用队列模拟jquery的动画算法实例

    本文实例讲述了用队列模拟jquery的动画算法.分享给大家供大家参考.具体分析如下: Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气.发现他写的一段源码,运行一下,还蛮好玩的,于是拿来分析一下,一来吸收下里边的营养,二来加深一下源码学习的功力.话说这源码还真是提高js内功的一大秘决,不信,就和我一起来品味一下吧. 复制代码 代码如下: //立即执行函数,没有什么好说的.看下面演示 /** (function($){     //此处的$会由后面紧跟的立

  • js、jquery图片动画、动态切换示例代码

    复制代码 代码如下: <style type="text/css"> #banner { padding: 5px; position: relative; width: 968px; height: 293px; /*border: 1px solid #666;*/ overflow: hidden; font-size: 16px; } #banner_list img { border: 0px; } #banner_bg { margin-bottom: 5px;

  • 用jquery实现动画跳到顶部和底部(这个比较简单)

    当点击顶部按钮的时候,执行方法,scrollTop属性获取选中标签距滚动条的距离,当点击底部标签时候,执行方法,其中offset()获取匹配元素在当前视口的相对偏移 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • 一款基jquery超炫的动画导航菜单可响应单击事件

    一款基jquery超炫的动画导航菜单可响应单击事件

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

  • jquery中animate动画积累的解决方法

    昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放 复制代码 代码如下: <span style="white-space:pre"> </span>/* 无缝式焦点图 */ var _left = 770; var left = -_left;//-770 function slideImg() { if(left == -3080 || left == 0) { _left = -_left; } $('.slidepics').animat

  • JQuery动画animate的stop方法使用详解

    animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css

  • jquery防止重复执行动画避免页面混乱

    最近开发前台页面的时候遇到一个问题.juery时候mouseover--或者其他事件,发现鼠标滑动过快导致动画重复执行,以至于页面乱了. 解决办法: 可以先判断一下元素是否处于动画中. 如: 复制代码 代码如下: if(!$(".content").is(":animated")){ //元素不处于动画中执行. }

  • 用Jquery.load载入页面后样式没了页面混乱的解决方法

    因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答: 是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML.这个是在jquery.load()函数中规定的.一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添

  • JavaScript避免代码的重复执行经验技巧分享

    我喜欢到一些大型网站上去翻阅它们的原代码,期望能找到一些可以应用到自己的代码中的模式,或发现一些之前从未听说过的工具和技巧.可是,在我查看这些大型网站的源代码时,经常会发现一个问题,那就是重复的代码执行,重复的功能应用.下面就是一些在查看它们的源代码时发现一些问题,把这些分享给大家,希望能让你们更加简洁高效的写出JavaScript代码. 重复的收集元素 我在他们的JavaScript代码里看到的最常见的问题是重复的收集元素.虽然jQuery选择器引擎或querySelectorAll的执行速度

  • 再JavaScript的jQuery库中编写动画效果的指南

    再JavaScript的jQuery库中编写动画效果的指南

    jquery中常用的动画的方法就是hide()与show(). $(element).hide()这段代码可以与这相等element.css("display","none") 在hide(time)与show(time)中填入事件,可以慢慢消失跟显现.可以修改元素的多个样式,高度,宽度,不透明度. 另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会.

  • jQuery中事件与动画的总结分享

    jQuery中事件与动画的总结分享

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) --:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 window.onload() = function () { } $(function () { $("li").bind("click", function () { $(this).css("

  • jQuery防止重复绑定事件的解决方法

    本文实例分析了jQuery防止重复绑定事件的解决方法.分享给大家供大家参考,具体如下: 一.问题: 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册

  • JS动态添加元素及绑定事件造成程序重复执行解决

    JS动态添加元素及绑定事件造成程序重复执行解决

    前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行,很多人在文章里写到了,也说了用off方法来解绑,但都未能点出问题的本质,几乎都忽略了问题的本质其实是事件委托造成的. 话不多说,上点天天看到的代码: 第一种:   $(document).on('click', function (e) { consol.lo

  • Jquery如何使用animation动画效果改变背景色

    Jquery如何使用animation动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只能动态改变数值型的参数,例如:top,left,width,height...等等 好像网上也有说要装一个 "jquery.ui" 的插件之类的.但是博主我实在不想引入过多的插件, 且恰好本人掌握的CSS比较好一点点, 所以就想了下面这么个法子. 但好在 CSS 它自带的

  • Jquery如何使用animation动画效果改变背景色的代码

    Jquery如何使用animation动画效果改变背景色的代码

     一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只能动态改变数值型的参数,例如:top,left,width,height...等等 好像网上也有说要装一个 "jquery.ui" 的插件之类的.但是博主我实在不想引入过多的插件, 且恰好本人掌握的CSS比较好一点点, 所以就想了下面这么个法子. 但好在 CSS 它自带的animation动画效果更加强大,它可以为我们提供背景

  • js定时器(执行一次、重复执行)

    1,只执行一次的定时器 复制代码 代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 </scrip

随机推荐