问题:日程提醒(跟日历一样的切换效果),只用一个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. 章节十五、2-PageObjectModel

    一.在实现自动化过程中,会有很多重复的代码,我们在维护代码时会很困难,如果想解决这个问题,我们就需要使用PageObjectModel(页面对象模型)的方式来进行自动化代码的书写. 二.案例演示 以该 ...

  2. GCN python 实现2:利用GCN进行节点分类

    参考:https://www.baidu.com/link?url=5oU-O_YQV8DdSTtRkgzsQ_vuwjJHyUOxqeAKhq98ZA5XtvKW8PNQwXgSlr5GpESRqh ...

  3. Python元组与字符串操作(9)——随机数、元组、命名元组

    随机数 import random #导入random模块 randint(a,b) 返回[a,b]之间的整数 random.randint(0,9) randrange([start],stop,[ ...

  4. [基础]斯坦福cs231n课程视频笔记(二) 神经网络的介绍

    目录 Introduction to Neural Networks BP Nerual Network Convolutional Neural Network Introduction to Ne ...

  5. Node.js到底是做什么的?这是我看到最好的解释了

    作者:贾厂长链接:https://www.zhihu.com/question/33578075/answer/56951771来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. C++使用OpenCV打印运行时间

    代码 int64 tall = cv::getTickCount(); std::cout<< "time:" << (cv::getTickCount() ...

  7. zz扔掉anchor!真正的CenterNet——Objects as Points论文解读

    首发于深度学习那些事 已关注写文章   扔掉anchor!真正的CenterNet——Objects as Points论文解读 OLDPAN 不明觉厉的人工智障程序员 ​关注他 JustDoIT 等 ...

  8. Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了 基于 Spring Boot 2.x 的 Finchley 版本,现在一起为项目做一次整体框架升级。

    升级前 => 升级后 Spring Boot 1.5.x => Spring Boot 2.0.2 Spring Cloud Edgware SR4 => Spring Cloud ...

  9. Mysql 视图&事务&触发器

    参考资料 一.视图 视图的含义: 视图是一个虚拟表,是从数据库中一个或者多个表中导出来的表. 1.创建视图 #语法:CREATE VIEW 视图名称 AS SQL语句 create view teac ...

  10. nginx使用多端口监听多个服务

    ###### nginx监听多个端口并转发给不同的服务 ### 第一个监听: upstream odoo { server localhost:; } upstream odoochat{ serve ...