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雪花飘落
闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...
随机推荐
- 4.dubbo 的 spi 思想是什么?
作者:中华石杉 面试题 dubbo 的 spi 思想是什么? 面试官心理分析 继续深入问呗,前面一些基础性的东西问完了,确定你应该都 ok,了解 dubbo 的一些基本东西,那么问个稍微难一点点的问题 ...
- osi七层简介(通俗易懂)
OSI七层 在以前不同的公司都会推出属于自己公司的私有网络协议,相互之间不能兼容用了那家公司的网就相当于上了那家公司的贼船 . 后来呢由一家名叫iso的组织制作了一个叫osi的协议 相当于给大家 ...
- 2.2 Scala基础知识
一.基本数据类型和变量 1.基本数据类型 java中每一个数据类型都是一个类: scala没有自己定义String类型,String类型是从java.lang.String照搬的. 字面量(liter ...
- android 开发工具 adb
1.abd基本使用 1.启动一个adb应用程序 adb -P <port> start-server # -P指定端口 默认是5037 1.停止adb adb kill-server 2. ...
- Git 创建点开头的文件和目录
Git 创建点开头的文件和目录 # 创建 .gitignore 文件 1@DESKTOP-3H9092J MINGW64 /e/x1/x1/demo1 (master) $ echo .idea &g ...
- 【oracle】11g服务器安装详细步骤
以下是百度经验:https://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html 1.同时解压 2.setup 3.
- zzulioj - 2600: 有多少天?
题目链接:http://acm.zzuli.edu.cn/problem.php?id=2600 题目描述 小D同学对日期类的问题很是有兴趣,已知1900-01-01是星期一,那么小D想知道给定两个年 ...
- [LeetCode] 694. Number of Distinct Islands 不同岛屿的个数
Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...
- [LeetCode] 10. Regular Expression Matching 正则表达式匹配
Given an input string (s) and a pattern (p), implement regular expression matching with support for ...
- Spring Boot Admin2.X监控的服务context-path问题
在使用Spring Boot Admin进行监控时,如果被监控的服务没有加context-path的话是不会有任何问题的,一旦服务加了context-path的配置,监控就会失败. 下图是正常情况的显 ...