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雪花飘落
闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...
随机推荐
- 【原创】Centos 7 升级安装python3.7.4
1.安装必须的软件 #更新源中包列表 yum -y update #先安装扩展源EPEL 才能安装pip 否则会报错 yum -y install epel-release //解决ssl问题,否则报 ...
- ObjectARX之Mac os开发
网上关于ObjectARX开发的相关介绍都基于Windows环境.Mac 环境的开发几乎没有,下面介绍Mac环境下ObjectARX的开发. AutoCAD ObjectARX开发必备条件: 1. 安 ...
- C语言结构体(摘抄C语言设计)
struct Student stu_1;//定义struct Student 类型的变量stu_1 struct Student *p;//定义指向struct Student类型数据的指针变量 p ...
- 第 33课 C++中的字符串(上)
历史的遗留问题在C语言中没有真正意义上的字符串,为了表达字符串这个概念利用字符数组来模拟字符串.C语言不支持真正意义上的字符串 (C++也不支持)C语言用字符数组和一组函数实现字符串操作 (C++中同 ...
- C#基础表达式语句详解(上)
本节内容: 1.表达式的定义: 2.各类表达式概览: 3.语句的定义: 4.语句详解: 1.表达式的定义: 1.1什么是表达式: (定义见下图)各类编程语言对表达式的实现不尽相同,但大体上都符合这个定 ...
- opencv旋转图像,90度标准旋转
摘自opencv 源代码 void rotate(InputArray _src, OutputArray _dst, int rotateMode) { CV_Assert(_src.dims() ...
- django之视图层和部分模板层
视图层 小白必会三板斧(三个返回的都是HttpResponse对象,通过看源码,可以知道是内部实现) 1.HttpResponse # 返回字符串 2.render # 返回一个html页面 还可以给 ...
- LG1198/BZOJ1012 「JSOI2008」最大数 线段树+离线
问题描述 LG1198 BZOJ1012 题解 我们把所有操作离线,设一共有\(n\)个插入操作. 于是提前建立\(n\)个数,全部设为\(-INF\) 接着逐个处理操作即可. \(\mathrm{C ...
- pagehelper超过页数仍然可以查出数据
spring boot中pageHelper的使用 pom文件中添加 <!--pagehelper --> <dependency> <groupId>com.gi ...
- phoenix hbase Can't get master address from ZooKeeper; znode data == null
问题描述: 项目一直在用的hbase节点 简称h1 由于网络问题,无法使用,重新找了一个网络稳定的节点 z1作为新的hbase库,库名称hbase_test,zookeeper等都配置好后,通过j ...