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

最新推荐文章于 2024-12-12 20:08:21 发布

陆康永

最新推荐文章于 2024-12-12 20:08:21 发布

阅读量929

点赞数

CC 4.0 BY-SA版权

分类专栏：常用功能代码查询 jquery

本文链接：https://blog.youkuaiyun.com/xiaomogg/article/details/44164871

常用功能代码查询同时被 2 个专栏收录

20 篇文章

订阅专栏

jquery

12 篇文章

订阅专栏

本文介绍如何利用jQuery库实现动画效果，通过数组存储动画任务并使用队列和去队列方法来控制动画执行流程。文章详细展示了如何在HTML页面中创建盒子和定位元素，以及如何通过JavaScript代码实现元素位置的平移动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>