1.停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态。

无参数stop():立即停止当前的动画,如果接下来还有动画则以当前状态开始接下来的动画。

举例:为元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完,就移出光标,则移出的动画效果就会被放到队列,等移入的动画完成后在执行。因此如果光标的移入移出速度太快,就会导致动画效果与移动光标不一致的情况。

此时如果在移入移出动画之前加入stop(),就能解决这个问题了。

$("div").hover(function(){
$(this).stop().animate({"height":"300px", "width":"300px"}, 200);
}, function(){
$(this).stop().animate({"height":"100px", "width":"100px"}, 200);
});

如果遇到组合动画:

$("div").hover(function(){
$(this).stop().animate({"height":"300px"}, 200) //如果在此时触发了光标的移出事件,将执行下边的动画,而非光标移出的动画,以为stop()是立即停止当前的动画进入下一个动画。
    .animate({"width":"300px"}, 200);
}, function(){
$(this).stop().animate({"height":"100px"}, 200)
    .animate({"width":"100px"}, 200);
});

此时需要用stop的第一个参数,设置为true,程序会把当前元素接下来尚未执行的动画队列都清空。

$("div").hover(function(){
$(this).stop(true).animate({"height":"300px"}, 200) //如果在此时触发了光标的移出事件,会直接停止当前的动画,并且清空了后边的动画,这样就会执行光标移出的动画了。
    .animate({"width":"300px"}, 200);
}, function(){
$(this).stop(true).animate({"height":"100px"}, 200)
    .animate({"width":"100px"}, 200);
});

第二个参数gotoEnd可以让当前的动画直接达到结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态的情况。

stop(false, true) : 当前的动画直接达到末状态。

stop(true, true) : 当前的动画直接达到末状态并清空当前对象的动画队列。

注意:jQuery只能设置正在执行的动画的最终状态,不能直接达到未执行动画的最终状态。

$("div").animate({"width" : "200px"}, 200) 
.animate({"height" : "200px"}, 200)
.animate({"opacity", "0.2"}, 200);

无论怎么设置stop()值,均无法在改变"width"或者"height"时,将此div的元素末状态改为300*150大小,并且透明度0.2。既stop只能改变当前正在执行的动画。

2.判断元素是否处于动画状态:

在使用animate()方法的时候,要避免动画积累导致动画与用户行为不一致的情况,需要判断当前元素是否正在执行动画。

if(! $(element).is(":animated") ){   //判断元素是否处于动画状态
//如果当前元素没有执行动画,...
}

锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)的更多相关文章

  1. jQuery停止动画和判断是否处于动画状态

    1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue ...

  2. Geodatabase - 判断是否处于编辑状态

    Engine中提供IDatasetEdit来判断数据是否处于编辑状态,我们知道,在ArcMap中,进行编辑的不一定都是要素类,也可以是表,网络几何等.以下能在ArcMap中进行编辑的数据都实现了 ID ...

  3. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  4. 锋利的jQuery读书笔记---jQuery中动画

    jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...

  5. jQuery中的动画——《锋利的JQuery》

    自CSS3以来,主流网站开始偏向于扁平风格和动画效果,这时就可以jQuery的动画就可以发挥其长处了,灵活的应用其动画API,让我们可以设计出很多绚丽的效果.下面,让我们来列举一些jQuery常用的动 ...

  6. 《锋利的JQuery》读书要点笔记3——事件和动画

    第四章 jQuery中的事件和动画 JS和HTML的交互是通过用户和浏览器操作页面时引发的事件来处理的,事件由浏览器自动生成. 4.1 jQuery中的事件 1. 加载DOM 这里主要是搞明白wind ...

  7. 《锋利的jQuery》心得笔记--Two Sections

    第三章 1.    DOM操作(节点) 1)         查找节点可以查找元素节点和属性节点 2)         创建节点: (1)       创建元素节点 var addLi = $(“&l ...

  8. 锋利的jQuery第2版学习笔记4、5章

    第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...

  9. 锋利的jQuery(第二版) 初读笔记

    window.onload(): 必须等待网页中所有的内容加载完毕后(包括图片)才能执行. $(document).ready(): 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没 ...

随机推荐

  1. 开源(免费)三维 GIS(地形,游戏)

    先写想法: 想做个简单的地形漫游,于是考虑在ww直接开发,或找个控件形式的开发组件. 最大的期望有: 1. 支持google的sketchup,快速智能三维建模 2. 设计模式做好点,最好先做成组件形 ...

  2. Android调用基于.net的WebService

    在实际开发项目中,有时候会为Android开发团队提供一些接口,一般是以asmx文件的方式来承载.而公布出去的数据一般上都是标准的json数据.但是在实际过程中,发现Android团队那边并不是通过将 ...

  3. [MetaHook] Quake FMOD function

    QFMOD.h #ifndef QFMOD_H #define QFMOD_H #include "fmod.h" extern FMOD_RESULT (F_API *qFMOD ...

  4. MyBatis与Hibernate对比

    一.相同点 都屏蔽 jdbc api 的底层访问细节,使用我们不用与 jdbc api 打交道,就可以访问数据. jdbc api 编程流程固定,还将 sql 语句与 java 代码混杂在了一起,经常 ...

  5. poj1067-取石子游戏-wythoff博弈

    打表找规律失败,搜了一下原来是wythoff博弈 /*------------------------------------------------------------------------- ...

  6. android官方开源的高性能异步加载网络图片的Gridview例子

    这个是我在安卓安卓巴士上看到的资料,放到这儿共享下.这个例子android官方提供的,其中讲解了如何异步加载网络图片,以及在gridview中高效率的显示图片此代码很好的解决了加载大量图片时,报OOM ...

  7. .NET领域最为流行的IOC框架之一Autofac

    一.前言 Autofac是.NET领域最为流行的IOC框架之一,微软的Orchad开源程序使用的就是Autofac,Nopcommerce开源程序也是用的Autofac. Orchad和Nopcomm ...

  8. "互联网思维"背后的谎言

    互联网公司/思维是什么鬼,说来惭愧上学的时候还因为知道www(World Wide Web)的中文名自豪了好久,之后在”高等学府“里学习软件工程,还愚蠢的以为自己步入了互联网之门. internet嘛 ...

  9. try-catch和throw,throws的区别和联系

    转载:http://blog.sina.com.cn/s/blog_62148d1e0100hkqc.html 区别一:throw 是语句抛出一个异常:throws 是方法抛出一个异常: throw语 ...

  10. 浅析Javascript

    Javascript是一种脚本语言,从出生就被唾弃,一开始人们使用它只是为了解决诸如页面数据校验之类的问题.它基于prototype的面向对象实现一度被认为很丑很难用,甚至很多身处一线Web开发者都不 ...