Qquery 队列动画 queue（） dequeue（） clearqueue（）

时间：2015-03-10 10:33:23 阅读：114 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<style type="text/css">
.box{border:1px solid red;width:600px;height: 300px;margin:30px auto;position: relative;}
.box div{position: absolute;top:0;width:10px;height:10px;background:blueviolet;}
.l1{left:20px;}
.l2{left:70px;}
.l3{left:120px;}
.l4{left:170px;}
.l5{left:220px;}
.l6{left:270px;}
.l7{left:320px;}
</style>
</head>
<body>
<button>stop</button>
<div class="box">
<div class="l1"></div>
<div class="l2"></div>
<div class="l3"></div>
<div class="l4"></div>
<div class="l5"></div>
<div class="l6"></div>

</div>
<script type="text/javascript">
$(function(){

var FUNC = [//把所有动画都存到数组里面

function () { $(".l1").animate({ top: "570" }, aniCB); },
function () { $(".l2").animate({ top: "570" }, aniCB); },
function () { $(".l3").animate({ top: "570" }, aniCB); },
function () { $(".l4").animate({ top: "570" }, aniCB); },
function () { $(".l5").animate({ top: "570" }, aniCB); },
function () { $(".l6").animate({ top: "570" }, aniCB); },
function () { alert("动画结束") }
];
$(document).queue("myAnimation", FUNC);//把动画数组赋值给$(document)下的myAnimation
var aniCB = function ()
{
$(document).dequeue("myAnimation");//用dequeue来执行下一个函数
};

$(".l1").animate({ top: "570" }, aniCB);//执行第一个定好，并且回调

$("button").click(function(){//点击清除队列
$(document).clearQueue(‘myAnimation‘);
})
});
</script>
</body>
</html>

标签：

原文地址：http://blog.csdn.net/xiaomogg/article/details/44164871

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行