jquery动画顺序执行_jQuery动画入门--顺序执行
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用的时候还去翻API
queue()/ dequeue()
这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知。这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码
$('#test').animate({
"width": "300px",
"height": "300px",
"opacity":"1"
});
这样test div的height、width、opacity是同时变化的,有时候我们不希望同步执行,而是形状的变化和透明度的变化分开,先变成300*300的div,然后透明度再逐渐变化,我们需要这么写
$('#test').animate({
"width": "300px",
"height": "300px",
}, function () {
$('#test').animate({ "opacity": "1" });
});
同学们可以想象一下要是有十个动画流程,那代码是什么样的,queue()和dequeue()可以解决此类问题,为所有的流程方法见一个队列,让function依次调用,先看一下语法
queue( [queueName ], newQueue ) 操作欲执行队列方法
第一个参数是队列名称,不写的话默认是fx
第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函数,用于向队列中添加新函数
dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function
每次调用此方法执行队列中下一函数
var q = [
function () {
$(this).animate({
"width": "200px",
"height":"200px"
}, next)
},
function () {
$(this).animate({
"width": "400px",
"height": "400px"
}, next);
}
];
function next(){
$('#test').dequeue('myQueue');
}
$('#test').queue('myQueue', q);
next();
上面代码就是可以让test div先变成200*200的,然后再变为400*400的,每个动画都执行回掉函数,调用队列中下一个方法,两个动画依次执行.
转自:http://www.cnblogs.com/dolphinX/p/3330174.html
PS:只转了原文的前半部分
参考:http://blog.sina.com.cn/s/blog_6d3f840a0101mmok.html
html代码:
var q = [
function () {
$(this).animate({
"width": "200px",
"height":"200px"
}, next)
},
function () {
$(this).animate({
"width": "400px",
"height": "400px"
}, next);
}
];
function next(){
$('#test').dequeue('myQueue');
}
$('#test').queue('myQueue', q);
next();
jquery动画顺序执行_jQuery动画入门--顺序执行相关推荐
- css animation顺序,按顺序运行css动画和WebkitAnimationEnded
我想按顺序动画几个SVG线元素,我在这里跟@Gaby方法A non-nested animation sequence in jQuery?并使用jQuery队列.但是我的WebkitAnimatio ...
- jquery 弹出窗口_jQuery弹出窗口和工具提示窗口动画效果
jquery 弹出窗口 In this tutorial, we are going to discuss about a jQuery plugin for responsive and acces ...
- 四、jQuery 中的事件和动画(嘎嘎详细)
文章目录 前言 一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
- js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
- Android 属性动画(一)新手入门
一.属性动画简介 Android 中动画有很多种,属性动画就是其中的一种.所谓的属性动画,就是在指定的时间内,通过改变对象的属性达到变化效果的动画.在 Android 中,属性动画系统是一个强健的框架 ...
- html设定元素动画执行,CSS动画 _Animation 教程_W3cplus
本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命.虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了. 对我而言,CSS动 ...
- 锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记 第三章 jQuery中的DOM操作 jQuery中的事件 事件绑定 bind方法 合成事件 hover方法 toggle方法 事件冒泡 事件对象 停止事件冒泡 阻止默认行为 ...
- jQuery(五)--自定义动画、动画
目录 一.自定义动画 1.1 animate() 1.2 animate()动画执行顺序 1.3 animate()动画回调函数和匀速运动 1.4 animate动画之stop()/delay() 二 ...
- 第7章 jQuery中的事件与动画
一.事件: 1.鼠标事件 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 dblclick( ) 触发或将函数绑定到指定元素的dblclick事件 双击鼠标时 mouseov ...
最新文章
- @Deprecated新外观可能是什么?
- 向量除法能用计算机吗,为什么向量没有除法
- 力扣1512.好数对的数目
- 1、ClassLoader.getResourceAsStream() 与Class.getResourceAsStream()的区别
- 一种多功能语音识别技术和音乐播放器相结合的方法
- Python 爬虫 (三) - Socket 网络编程
- Vectorworks 2022 SP2 for mac(首选3D建筑设计软件)
- linux下原始套接字编程错误:Operation not supported
- Excel 相对引用 绝对引用 区别是什么 如何快速转换 快捷键 F4
- redhat linux系统下查看Emulex HBA卡基本命令
- VR全景制作教程|VR全景拍摄和制作竟如此简单
- Coupled Layer-wise Graph Convolution for Transportation Demand Prediction
- 安全生产知识竞赛试题库及答案
- Qt深入浅出(一) 从零开始写Qt应用
- python制作字符画(非gif转字符图)
- IjkPlayer播放器秒开优化以及常用Option设置
- PAKDD 2019 都有哪些重要看点?看这篇文章就够了!
- 知名密码管理应用LastPass启用双因素认证
- Ubuntu20详细安装步骤
- Mybatis丶Mybatis-Plus
热门文章
- vue侧边栏导航,右侧显示对应内容
- linux php 执行命令权限不够,PHP调用Linux命令权限不足问题解决方法
- 在做技术面试官时,我是这样甄别大忽悠的——如果面试时你有这样的表现,估计悬...
- 台式计算机显示器的分辨率,电脑屏幕分辨率多少合适 屏幕分辨率标准【详解】...
- 为什么浏览器会使用多进程架构
- JAVA 拍照 exif GPS_读取图片EXIF块中GPS信息,转换为高德地图API坐标
- python cannot concatenate_解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
- i9 11900H 和 i7 11800H 选哪个
- GET /socket.io/?EIO=3transport=websocket
- CCF BDCI“大数据平台安全事件检测与分类识别”赛题,奇点云夺冠