问题:日程提醒(跟日历一样的切换效果),只用一个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. Python环境安装与基础语法(2)——数据类型、标识符、语言分类

    高级语言发展 结构化语言:以顺序(步骤化),分支,循环描述问题 面向对象语言:接近人类的认知,万物抽象成对象,对象间的关系抽象成类和继承 程序=数据结果+算法 Python解释器 CPython:由C ...

  2. V4l2初识(七)-----------浅析app获取虚拟摄像头数据的过程

    继续分析数据的获取过程: 1.请求分配的缓冲区: ioctl(4,VIDIOC_REQBUFS) vidioc_reqbufs 2.查询和映射缓冲区   ioctl(4,VIDIOC_QUERYBUF ...

  3. 201871010131-张兴盼《面向对象程序设计(java)》第十六周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  4. pikachu的xss及csrf

    一.XSS 可解析的js 未经过滤 XSS见框就插     script 大小写  中间插入 <img src="" onerror="alert(11111)&q ...

  5. 【视频技术】ffmpeg截取图片(Mac)

    1. 输出单张图片:ffmpeg -i NLP-CNN.mp4 -f image2 -ss 2000 -vframes 1 -s 220*220 NLP-CNN-003.jpg 2. 输出所有图片: ...

  6. centos虚拟机 与主机同步时间

    同步系统时间: yum install ntp ntpdate cn.pool.ntp.org ntpdate 0.centos.pool.ntp.org rm /etc/localtime ln - ...

  7. chrom代理插件

    1.SwitchyOmega 2.Resource Override

  8. SpringBoot整合FastDFS实现图片的上传

     文件的上传和预览在web开发领域是随处可见,存储的方式有很多,本文采用阿里巴巴余庆大神开发的FastDFS进行文件的存储,FastDFS是一个分布式文件存储系统,可以看我上一篇博文,有安装和配置教程 ...

  9. 论文阅读笔记五十八:FoveaBox: Beyond Anchor-based Object Detector(CVPR2019)

    论文原址:https://arxiv.org/abs/1904.03797 摘要 FoveaBox属于anchor-free的目标检测网络,FoveaBox直接学习可能存在的图片种可能存在的目标,这期 ...

  10. [C/C++]大小端字节序转换程序

    计算机数据存储有两种字节优先顺序:高位字节优先(称为大端模式)和低位字节优先(称为小端模式). 大端模式,是指数据的高字节保存在内存的低地址中,而数据的低字节保存在内存的高地址中,这样的存储模式有点儿 ...