web前端：jq处理动画累加

作者:TenFly 更新于： 2020-03-05 21:32:35

　　动画的概念不同于一般意义上的动画片，动画是一种综合艺术，它是集合了绘画、漫画、电影、数字媒体、摄影、音乐、文学等众多艺术门类于一身的艺术表现形式。最早发源于19世纪上半叶的英国，兴盛于美国，中国动画起源于20世纪20年代。

　　问题：日程提醒（跟日历一样的切换效果），只用一个div来展示当天日程数据，每次清空div里的数据再加载数据，导致切换日期时，数据展示div有闪动，于是采用动画来进行过渡，这样就巧妙地避免了闪动；

　　$("#siteInfo").hide(function(){

　　$("#siteInfo").empty();

　　getSite();

　　}).fadeIn();

　　但由于动画有完成时间，导致频繁切换日期的时候出现了动画累积的现象，操作停止后累积的动画仍在继续，这样的用户体验感是很差的，于是想到了stop()方法来停止动画

　　$("#siteInfo").stop().hide(function(){

　　$("#siteInfo").empty();

　　getSite();

　　}).fadeIn();

　　看起来不错，但总觉得还差点什么，原来stop()只停止了第一个动画（[hide()]），对于后续的多个动画（[fadeIn()]...）就无能为力了；

　　然后看了一下stop()的语法：

　　$("element").stop([clearQueue][,gotoEnd]);

　　clearQueue：bool，代表是否要清空未执行的动画队列

　　gotoEnd：bool，有前一个参数才有此参数，代表将正在执行的动画直接跳到末状态

　　试试一个参数

　　stop(true)

　　它将后续动画全部清空了，频繁切换的时候，它基本会保持在当前状态，停止操作后完成最后一次数据加载，是可行的；

　　stop(false)

　　跟忽略它吧，什么效果也没有

　　试试两个参数

　　stop(false,false),跟stop()一样

　　stop(false,true)，第一个动画直接跳到末尾，接着继续后面的动画，所以是不满足效果的

　　stop(true,false),跟stop(true)一样

　　stop(true,true),跳到第一个动画末尾，后续动画全部停止

　　动画的概念不同于一般意义上的动画片，动画是一种综合艺术，它是集合了绘画、漫画、电影、数字媒体、摄影、音乐、文学等众多艺术门类于一身的艺术表现形式。