jq处理动画累加 | 易学教程

问题：日程提醒（跟日历一样的切换效果），只用一个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),跳到第一个动画末尾，后续动画全部停止

来源：https://www.cnblogs.com/tenfly/p/11726490.html

标签

动画

动漫