今天我们来看看jquery中动画操作的stop函数。其实我至今不是很明白啊,所以此文算是求救以及抛砖引玉。

在jquery 1.7版本以前,stop支持两个参数,分别是clearQueue和jumpToEnd。这点可以参考官方文档:stop

今天我写个示例,该例参考了w3school的在线测试代码:jquery stop 参数示例

本人代码示例demo1demo2

stop(clearQueue,jumpToEnd)函数分析

仅仅从官方API上给出的说明,我们就知道,第一个参数是针对的其它动画队列(不包含当前动画),第二个参数则是当前动画。

那么,什么是动画队列呢?

所谓的动画队列就是一系列要执行的动画,比如对一个盒子先在前一秒执行挪动动画,再过一秒执行变大的动画。那么,这就是两个动画了。

再比如,点击某个按钮a,给盒子b触发动画效果,每次挪动10px,挪动10px需要的时间是2s,那么以很快的速度狂点这个a按钮,你在2s时间里点了10次,这个动画需要累积10次的。虽然我们2s里只能完成1个动画效果,但是剩下的9个动画还是要完成的,这就形成了动画累积,跟排队似的,若不做任何处理,将会逐个按照先来先动画的规则完成。

但现实中,这种动画累积并非是我们期望的结果。所以,我们需要对动画进行更多的操作。从stop的参数来看,对于动画的操作,分为当前动画等候动画队列,传入的参数为boolean值类型。

  • clearQueue,是否清除等候动画队列,默认false,即是不清除等候动画队列,设置为false,则清空等候动画队列。
  • jumpToEnd,是否立即完成当前动画,默认false,即是停止当前动画,设置为true,则立即完成当前动画。

没错,上面的例子确实可以验证stop函数的参数作用。

但是,尼玛啊,我又写了个例子,我感脚我的认知又被颠覆了。。。

在线demo,请猛戳 jquery stop 示例3

记住,测试时,光标迅速进入和离开。然后,光标再次进入时,就没反应了。。

另外,既然第一个设置是针对等候动画队列的,为何我设置为false时,那些积累的动画队列就不执行了呢?

还是执行了,但是很短暂?

求大神告知我真相。

jquery animate stop函数解析的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jquery animate函数实现

    jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...

  3. jquery的动画函数animate()讲解一

    jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...

  4. jquery自调用匿名函数解析

    alert("undefined" in window);        (function (window, undefined) {            //构造jQuery ...

  5. [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")

    javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢?   原因在于: ...

  6. JQuery html API支持解析执行Javascript脚本功能实现-代码分析

    JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...

  7. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  8. jQuery animate easing使用方法

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  9. jquery animate 详解

    一.前言 继上一篇文章jquery stop的探索之后,我们继续对jquery动画animate的研究. 从stop给出参数我们就知道,它适合你去立即停止或者立即结束当前动画,清除或者继续非当前的动画 ...

随机推荐

  1. C# Parse和Convert的区别分析(转)

    大家都知道在进行类型转换的时候有连个方法供我们使用就是Convert.to和*.Parse,但是疑问就是什么时候用C 什么时候用P 通俗的解释大家都知道: Convert 用来转换继承自object类 ...

  2. Coreseek/sphinx全文检索的了解

    Coreseek/sphinx全文检索的了解 概述: 全文检索是一种将文件里全部文本与检索项匹配的文字资料检索方法,全文检索是将存储于数据库中整本书.整篇文章中的随意内容信息查找出来的检索.它能够依据 ...

  3. 搭建一个三台服务器的Memcached集群

    关于memcached的基础知识可以查看博客其他博文,这里只记录了搭建的过程,谢谢! 1.分别在三台服务器上安装Memcached并启动 第一.由于memcached是基于libevent的事件处理, ...

  4. [连载]Java程序设计(04)---任务驱动的方法:工资结算系统

    任务:或在公司,该公司将其分为三类人员:部门经理.销售员.在发工资的时候,部门经理拿固定月薪8000元.技术人员按每小时100元领取月薪.销售人员依照500元底薪加当月销售额的4%进行提成.设计并实现 ...

  5. php中des加密解密 匹配C#des加密解密 对称加密

    原文:php中des加密解密 匹配C#des加密解密 对称加密 网上找来的 php des加密解密 完全匹配上一篇C# 字符串加密解密函数  可以用于C#和php通信 对数据进行加密,其中$key 是 ...

  6. Visual Studio 单元测试之二---顺序单元测试

    原文:Visual Studio 单元测试之二---顺序单元测试 此文是上一篇博文:Visual Studio 单元测试之一---普通单元测试的后续篇章.如果读者对Visual Studio的单元测试 ...

  7. ECharts图表系统 特性总览

    最近在玩ECharts,感觉真心不错,在这里把官方的资料收集收集,给大家推荐一下下~ Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用 ...

  8. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  9. Android Fragement学习笔记(三)----PreferenceFragment使用

    我相信每个人都Perference大家都比较熟悉,这就是我们常说的偏好,首选项设置,一些数据可以保存.例如,一些元件的,我们使用上次.希望下次启动后仍然生效,烦.一般这个时候我们便会使用perfere ...

  10. KMP算法简单回顾

    前言 虽从事企业应用的设计与开发,闲暇之时,还是偶尔涉猎数学和算法的东西,本篇根据个人角度来写一点关于KMP串匹配的东西,一方面向伟人致敬,另一方面也是练练手,头脑风暴.我在自娱自乐,路过的朋友别太认 ...