jquery animate stop函数解析
今天我们来看看jquery中动画操作的stop函数。其实我至今不是很明白啊,所以此文算是求救以及抛砖引玉。
在jquery 1.7版本以前,stop支持两个参数,分别是clearQueue和jumpToEnd。这点可以参考官方文档:stop
今天我写个示例,该例参考了w3school的在线测试代码:jquery stop 参数示例
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函数解析的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jquery animate函数实现
jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...
- jquery的动画函数animate()讲解一
jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...
- jquery自调用匿名函数解析
alert("undefined" in window); (function (window, undefined) { //构造jQuery ...
- [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")
javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢? 原因在于: ...
- JQuery html API支持解析执行Javascript脚本功能实现-代码分析
JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...
- 详细解读Jquery各Ajax函数
$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...
- jQuery animate easing使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery animate 详解
一.前言 继上一篇文章jquery stop的探索之后,我们继续对jquery动画animate的研究. 从stop给出参数我们就知道,它适合你去立即停止或者立即结束当前动画,清除或者继续非当前的动画 ...
随机推荐
- timesten备份和恢复
ttIsql "DSN=ttwind;UID=cacheuser;PWD=cacheuser;OraclePWD=cacheuser;" --1.查看当前版本号 Command&g ...
- 自由软件之父、Google+设计者、Java之父、Linux之父、万维网之父、Vi编辑器之父、苹果Lisa电脑界面设计、微软首席软件架构师
自由软件之父.Google+设计者.Java之父.Linux之父.万维网之父.Vi编辑器之父.苹果Lisa电脑界面设计.微软首席软件架构师 理查德·斯托曼(Richard Stallman) 理查德· ...
- POJ 2724 Purifying Machine(最大独立集)
POJ 2724 Purifying Machine 题目链接 题意:这题题意有点没看懂.看了别人的题解, 给出m串长度为n的01串. 有些串中可能包括,这种串能够表示两个串,为1 和为0. 反复的算 ...
- jQuery Easy UI LinkButton(button)包
LinkButton(button)包,easyui其中一个基本组成部分 演示样例: <!DOCTYPE html> <html> <head> <title ...
- Google Hacking的实现以及应用
Google Hacking其实并算不上什么新东西,在早几年我在一些国外站点上就看见过相关的介绍,但是由于当时并没有重视这种技术,认为最多就只是用来找找未改名的mdb或者别人留下的webshell什么 ...
- linux sendmail 邮件服务器架设(fedora 8)
linux sendmail 邮件服务器架设(fedora 8) 2009-01-22 17:27 3316人阅读 评论(2) 收藏 举报 邮件服务器linuxprotocolscaching测试lo ...
- 领域驱动设计(DDD)
领域驱动设计(DDD)实现之路 2004年,当Eric Evans的那本<领域驱动设计——软件核心复杂性应对之道>(后文简称<领域驱动设计>)出版时,我还在念高中,接触到领域驱 ...
- gradle测试与线上打包
首先,第一反应理所当然的是profile : <?xml version="1.0" encoding="UTF-8"?> <beans xm ...
- asp.net MVC2.0学习笔记
asp.net;与mvc都是不可替代的:只是多一种选择:(解决了许多asp.net的许多缺点) model:充血模型.领域模型:很大程度的封装: 控制器:处理用户的交互,处理业务逻辑的调用,指定具体的 ...
- Mac OS X下环境搭建 Sublime Text 2 环境变量配置 开发工具配置Golang (Go语言)
Golang (Go语言) Mac OS X下环境搭建 环境变量配置 开发工具配置 Sublime Text 2 一.安装Golang的SDK 在官网http://golang.org/ 直接下载安装 ...