jQuery动画入门--顺序执行
来源:互联网 发布:nginx禁止代理ip访问 编辑:程序博客网 时间:2024/05/22 05:06
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现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代码:
<html><head><meta charset="UTF-8"><script src="jquery.js"></script></head><body><div style="width:100px;height:100px;background:rgb(255,0,0);" id="test" ></div></body><script type="text/javascript">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();</script></html>
- jQuery动画入门--顺序执行
- jQuery动画入门--顺序执行
- jQuery动画入门--顺序执行
- jQuery 执行顺序
- jquery执行顺序问题
- Jquery 执行顺序
- jQuery的$函数执行顺序
- jquery得ajax执行顺序
- JQuery ajax 事件执行顺序
- jquery ajax 事件执行顺序
- 防止jquery重复执行动画
- jquery动画累积执行解决方法
- jQuery防止动画重复执行
- 使用AnimatorSet控制动画执行顺序
- iOS animation 核心动画 顺序执行
- jQuery入门[6]-动画
- jQuery入门[6]-动画
- JQuery入门(7)动画效果
- 机房收费之组合查询
- URLConnection的连接、超时、关闭用法总结
- Power of Two
- Effective Objective-C 2.0 第2条:在类的头文件中尽量少引入其它头文件
- 如何获取Input标签自定义属性的值
- jQuery动画入门--顺序执行
- Objective-C语法之代码块(block)的使用
- 平方根的异常
- poj解题报告——3537
- 如何在android 系统 C/C++ 层中添加 log 信息
- 【图像配准】基于灰度的模板匹配算法(二):局部灰度值编码
- AE开发之路(三)
- POJ 1067 取石子游戏 (威佐夫博弈)
- ubuntu下安装Python的MySql的开发环境