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),跳到第一个动画末尾,后续动画全部停止
jq处理动画累加的更多相关文章
- 今天讲的是JQ 的动画效果
老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Jq自定义动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq时间戳动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq常用动画fade slide
https://www.cnblogs.com/sandraryan/ hide(); <div class="box">big box</div> $(' ...
- jq动画设置图片抽奖(修改效果版)
效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...
- jq动画和停止动画
使用jq 实现动画循环效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3动画(个人理解)
随着学习的深入,越来越觉得Css3动画的重要,虽然JQ自定义动画和动画回调函数必须掌握,但是css3动画做起来更加绚丽,更加方便!1.常规使用1.1 使用transition属性,一般我们是配合hov ...
- html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- 手写简单的jq雪花飘落
闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...
随机推荐
- Linux磁盘分区/格式化/挂载目录
分区及挂载目录 以CentOS7.2为例,一般我们服务端应用部署前需要确认部署机的磁盘空间及挂载目录.操作如下: 如上图,如果操作系统是新装的,未挂盘的话需要先挂载盘.操作如下: fdisk -l # ...
- day09 作业
简述定义函数的三种方式 空函数.无参函数.有参函数 简述函数的返回值 函数内部代码经过一系列的逻辑处理返回的结果 函数没有返回值,默认返回None 函数可以通过return返回出返回值 return可 ...
- c++ win32下窗口的最小化到托盘以及还原
框架是用visual studio创建的win32控制台模板,然后自己添加最小化及还原部分代码. 需要额外包含的头文件: #include <shellapi.h> #include &l ...
- NCcat学习使用
一.使用手册 1.简介:nc/NetCat是一款端口监听工具,可以用来建立系统之间的连接.传输文件.TCP代理等. 2.命令参数 nc [-options] hostname port[s] ...
- 2.1 Scala语言概述
一.编程范式 命令式编程没有办法充分利用多核CPU: 函数式编程很多变量是不可修改的. 二.Scala简介 特点 scala运行在JVM上,兼容现有的Java程序: 面向对象的编程语言: 一门函数式语 ...
- 论文笔记系列-AutoFPN
原论文:Auto-FPN: Automatic Network Architecture Adaptation for Object Detection Beyond Classification 之前 ...
- Django orm进阶查询(聚合、分组、F查询、Q查询)、常见字段、查询优化及事务操作
Django orm进阶查询(聚合.分组.F查询.Q查询).常见字段.查询优化及事务操作 聚合查询 记住用到关键字aggregate然后还有几个常用的聚合函数就好了 from django.db.mo ...
- Tomcat服务部署与Nginx负载均衡配置
一.中间键产品介绍 目前来说IBM的WebSphere,Oracle的Weblogic占据了市场上java语言Web站点的部分份额,该两种软件都是商业化的软件,由于性能优越,可靠性高等优点应用于大型互 ...
- 字符串s倒序输出
编程将字符串s倒序输出,要求利用函数递归实现. 输入格式要求:"%s" 提示信息:"input your string:\n" 输出格式要求:"%c& ...
- nginx日志说明
一.日志说明 nginx日志主要有两种:访问日志和错误日志.访问日志主要记录客户端访问nginx的每一个请求,格式可以自定义:错误日志主要记录客户端访问nginx出错时的日志,格 式不支持自定义.两种 ...