jQuery操作动画队列
来源:互联网 发布:为什么运营商封80端口 编辑:程序博客网 时间:2024/04/27 22:17
1.前言
当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。
jQuery提供了以下几种方法来操作动画队列。
1) stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。
2) queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。
3) queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。
4) dequeue():执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。
5) clearQueue([queueName]):清空动画函数队列中的所有动画函数。
2.例子
下面的程序代码示范了访问默认动画队列的属性:
<!DOCTYPE html><html><head><meta name="author" content="OwenWilliam /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 动画队列 </title><style>div {width: 60px; height: 60px;position:absolute;top:60px; background: #f0f;display:none;}</style></head><body><script type="text/javascript" src="../jquery-1.8.0.js"></script><p>动画队列的长度是:<span></span></p><div></div><script type="text/javascript">var div = $("div");function runIt(){// 第1个动画:显示出来div.show("slow");// 第2个动画:自动动画,水平左移300pxdiv.animate({left:'+=300'},2000);// 第3个动画:卷起来div.slideToggle(1000);// 第4个动画:放下来div.slideToggle("fast");// 第5个动画:自动动画,水平右移300pxdiv.animate({left:'-=300'},1500);// 第6个动画:隐藏出来div.hide("slow");// 第7个动画:显示出来div.show(1200);// 第8个动画:卷起来,动画完成后回调runItdiv.slideUp("normal", runIt);}// 控制每0.1秒调用一次该方法,该方法用于显示动画队列的长度function showIt(){var n = div.queue();$("span").text(n.length);setTimeout(showIt, 100);}runIt();showIt();</script></body></html>
3.执行结果
0 0
- jQuery操作动画队列
- jQuery中使用动画队列自定义动画
- jQuery简单动画效果和动画队列
- jQuery中的队列操作
- JQuery之动画操作
- jQuery之动画操作
- JQuery的动画操作
- jQuery动画操作
- JQuery动画一些操作
- 用队列模拟jquery的动画算法
- jquery 实现动画简单操作
- jQuery数据篇-底层函数队列操作
- jQuery数据篇-函数队列操作
- jQuery事件处理,动画,类数组操作
- JQuery DOM操作、 事件和动画
- jQuery选择器、操作DOM、事件、动画
- JQuery总结------元素选择,操作,特效动画
- JQuery 两个ul标签中的li互相移动(动画队列)
- Unable to connect to your virtual device!解决方法
- Tarjan算法求至少要添加几条边才能使无向连通图变为边双连通图。
- 【VS开发】关于内存泄漏的调试
- 04 Java API
- 冒泡排序法
- jQuery操作动画队列
- 自考总结之信息资源管理
- 开始写博客
- LeetCode-103.Binary Tree Zigzag Level Order Traversal
- 共同学习Java源代码--数据结构--AbstractCollection抽象类(二)
- 05 输入输出(IO)
- linux
- xcode7 设置启动图片 LaunchImage
- android studio install报错