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

jq处理动画累加的更多相关文章

  1. 今天讲的是JQ 的动画效果

    老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. Jq自定义动画

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jq时间戳动画

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jq常用动画fade slide

    https://www.cnblogs.com/sandraryan/ hide(); <div class="box">big box</div> $(' ...

  5. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

  6. jq动画和停止动画

    使用jq 实现动画循环效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. CSS3动画(个人理解)

    随着学习的深入,越来越觉得Css3动画的重要,虽然JQ自定义动画和动画回调函数必须掌握,但是css3动画做起来更加绚丽,更加方便!1.常规使用1.1 使用transition属性,一般我们是配合hov ...

  8. html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  9. 手写简单的jq雪花飘落

    闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...

随机推荐

  1. sed 常用命令 网址

    https://wangchujiang.com/linux-command/c/sed.html https://linux.cn/article-11367-1.html https://juej ...

  2. 3.3 Spark的部署和应用方式

    一.Spark的部署 1.单机Local 2.集群 (1)Standalonc Spark自带的资源管理器,效率不高 (2)YARN 如果部署的是Hadoop集群,可以用YARN资源调度 (3)Mes ...

  3. Rust中的控制结构

    fn main() { let number = ; { println!("condition was true"); } else { println!("condi ...

  4. 关于k8s集群证书1年过期后,使用kubadm重新生成证书及kubeconfig配置文件的变化

    这个证书很重要,不用说. 但手工生成证书,确实工作量大且容易出错. 推荐的方式,是保留/etc/kubernetes/pki目录下的ca.crt,ca.key,sa.crt,sa.key. 这四个文件 ...

  5. jmeter压测学习6-HTTP Cookie管理器

    前言 web网站的请求大部分都有cookies,jmeter的HTTP Cookie管理器可以很好的管理cookies. 我用的 jmeter5.1 版本,直接加一个HTTP Cookie管理器放到请 ...

  6. NOI.AC 722: tree

    就贴个代码 #include <cstdio> #include <algorithm> typedef long long LL; const int MN = 200005 ...

  7. 洛谷 P3998 [SHOI2013]发微博

    洛谷 P3998 [SHOI2013]发微博 洛谷传送门 题目描述 刚开通的 SH 微博共有n个用户(1Ln标号),在这短短一个月的时间内, 用户们活动频繁,共有m 条按时间顺序的记录: ! x 表示 ...

  8. 数据库创建,用户管理,导入dmp文件

    创建数据库文件 CREATE TABLESPACE toolset LOGGING DATAFILE '/home/oracle/app/oracle/oradata/orcl/toolset.dbf ...

  9. 4-ESP8266 SDK开发基础入门篇--串口

    所有的源码 https://gitee.com/yang456/Learn8266SDKDevelop.git 手头有任何8266的板子就可以,不需要购买 https://item.taobao.co ...

  10. day 22

    Creativity requires the courage to let go of certainties. 创新需要勇气承担不确定性.