zoukankan      html  css  js  c++  java
  • 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),跳到第一个动画末尾,后续动画全部停止

  • 相关阅读:
    good
    C# 调用控制台程序,并获取输出写入文件
    正则基础之——环视(Lookaround)
    C# 正则表达式及常用正则表达式
    c# winform 关于DataGridView的一些操作(很全,绝对够用)
    [bzoj4542][Hnoi2016]大数——同余+莫队
    [bzoj4010][HNOI2015]菜肴制作——拓扑排序
    [bzoj5285][Hnoi2018]寻宝游戏——思维+排序
    NOIP2018游记&&总结
    [bzoj5289][Hnoi2018]排列——贪心+堆
  • 原文地址:https://www.cnblogs.com/tenfly/p/11726490.html
Copyright © 2011-2022 走看看