JQ动画开发大秘籍

最新推荐文章于 2023-06-25 20:51:27 发布

Cabchinoe

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量1k

点赞数

分类专栏： JQuery 文章标签： jquery 动画队列

本文链接：https://blog.csdn.net/Cabchinoe/article/details/40143639

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是本人活了20+年第一次写博客，请各位大牛轻喷！想想自己已经大学快毕业的人了，又读的是软件工程专业，平时csdn没少看文章就是自己没动手写。

这次文章写的是JQuery动画开发里面的一些问题，主要是动画队列的控制和用户交互式的动画状态切换。

小弟暑假至今在一家互联网公司实习，主要负责游戏官网开发的工作。游戏官网中会含有许多动画效果，而且许多是和用户交互的，比如点击切换页面元素的显示/隐藏，位置变化等。在此过程中如果使用默认的动画切换控制，可能会导致一些样式的失控。最常见的情况就是疯狂点击产生动画效果的按钮，然后页面就乱乱的了。

在写这篇文章之前，我参考了以下几篇关于JQuery动画队列的文章，写的不错，列出来一起学习

① jQuery下的动画处理总结 http://www.jb51.net/article/42000.htm

② 读jQuery之二十一（队列queue） http://www.cnblogs.com/snandy/archive/2013/02/18/2892749.html

③ jQuery动画高级用法（上）——详解animation中的.queue()函数 http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.html （获取队列长度部分的时间控制传参有误，不应该是字符串）

先举一个例子，假如我们有下面这个块

<div id="mydiv" style="position:absolute; width:100px; height:100px; background-color: red;"></div>

然后我们设置三个按钮，分别是向左移动200px，向右移动200px，slidetoggle

他们对应的函数分别是

function animatel(){
	$("#mydiv").animate({left:'-=200'},1000);
}
function animater(){
	$("#mydiv").animate({left:'+=200'},1000);
}
function animates(){
	$("#mydiv").slideToggle(500);
}

然后我们开始狂点这几个按钮，能点多块点多快，来来回回切换地点，点完之后你会发现，这个小块已经根本停不下来了！其实它一直在按照你刚才点的顺序移动。

然而在很多用户交互的动画设计中我们并不希望看到这样的情况，用户希望点击完成后就能看到想要的结果而不是要等动画完成。

这时候我们可以使用Jquery的队列处理中的stop()方法来处理。

以下是w3school 对于stop方法的介绍

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面我来介绍stop的巧妙用法：

一、避免透明度错乱

先说一下，假如我们有两个元素，那么他们执行动画的时候是并行的，和语句的前后是无关的，即使同一元素的动画与费动画级联方式写法也不能让非动画操作可以插在动画队列中执行，详细看上面推荐的博文就知道了。

假如我们有 id 为 d1 和 d2 的两个元素，那么

$('#d1').animate(....);
$('#d2').animate(....);

这两个动画是并行执行的。

有很多情况下，像图片渐隐渐现效果我们会用fadeIn(time)或show(time)来做，通常是当前一张先隐藏，然后下一张显示，并且还有一个标记来标记当前显示的是哪一张，一般在显示效果执行的时候改变这个变量。但是这个变量的改变是瞬时的，当我们狂点切换按钮的时候，这个变量已经变化了N多次，而元素还在fade中，这样你会看到很诡异的效果，明明点完了但是大家都在闪，闪玩有可能还都消失了。

example：

$(list[now]).fadeOut(200);
$(list[next(now)]).fadeIn(200);
now = next(now);

于是我们可能会想到回调函数，将now的改变放到回调中进行，保证切换完成再改变值。但是仍然避免不了狂点的时候在同一个元素上进行相同的操作，攒了很多到动画队列里面，反而到了now改变之后还在继续执行。注意，这里并非闭包，所以绑定的变量改变后动画队列里就乱成一套了。

可能我们会用上面那些博文介绍的队列方法，但狂点就是狂加入队列，会出现点完还一直在切的情况。

这里介绍大家用stop(false,true) 的方法，在jq1.9.2版本有finished方法，是等同的。相当于把该元素的动画状态立刻完成。

$(list[now]).stop(false,true).fadeOut(200);
$(list[next(now)]).stop(false,true).fadeIn(200);
now = next(now);

解决！

坏的例子http://xym.163.com/index.html 网易游戏的迷你西游网站（不是吐槽！纯属学习研究态度）

我们可以试试狂点下面nav的标签，这些标签是用来动画切换页面的。

来回点几次后页面就变成下面这样了

于是我在开发的时候做了修正。由于页面的元素太多，每一个都在并行执行，要逐个去stop是不可能的，用全部加到队列的方法有变成线性执行。用clearQueue相当于stop（TRUE），动画就停止了，也不好办。所以用了一个类似互斥锁的东西，当页面在运动的时候点击其他标签是没有用的，必须等到完成解锁后才能点击。解锁的方法可以用回调或者promise的方法。（类似实现的eg. http://fkgd.4399sy.com/ ）

二、模拟页面滚动的方法

先上示例网址：http://kdxx.4399sy.com/

效果是要求页面的scroll值到达一定程度的时候页面进行滚动，当然，点击左侧的nav的时候也会进行滚动。

如果按照之前的stop(false,true)的方法也是可以的，只不过会出现这样的情况。

当点击nav的标签时进行滚屏，滚到一半，点击另一个标签，当前状态瞬时完成，滚到一半的页面马上滚好了，开始滚到下一页面去。这样会稍微显得不真实一些。

而用刚刚互斥锁来解决又有一些让用户觉得没有控制力（时间比上一个稍微长，越长越不好用互斥锁，不过苹果官网用的就是互斥锁的感觉）

这里stop的第二个用法出来了

用上stop(true,false)，意思的当前动画停止动了，清除队列。然后程序会执行下面的代码了，也就是滚到下一页面的代码。

（疯狂格斗不用此方法是因为它不是一个大页面在动而是一大堆元素在动）

tips：为了防止页面滚动期间鼠标滚轮的作用，加上滚动期间禁用滚轮体验会好很多哦。

BTW：

jq的动画库有很多，比如easing库（http://gsgd.co.uk/sandbox/jquery/easing/），支持颜色渐变的color库（http://www.bitstorm.org/jquery/color-animation/）等