<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta content="https://www.jb51.net/" />
<title>queue()函数-脚本之家</title>
<style type="text/css">
.box{
width:300px;
height:150px;
}
.mytest{
width:50px;
height:50px;
background-color:green;
position:absolute;
left:0px;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript" src="https://www.jb51.net/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:"+=200"},3000);
$(".mytest").animate({top:"+=50"},2000);
$(".mytest").queue(function(){
$(this).text("动画还将持续");
});
$(".mytest").animate({left:"-=200"},3000);
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div>
<div></div>
</div>
<button>点击开始动画</button>
<button>计算队列中函数数量</button>
</body>
</html>
以上代码中，我们想在执行完text()方法之后再执行一个自定义动画，但是表现却并非如此，最后面的自定义动画并没有执行。
代码修改如下:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta content="https://www.jb51.net/" />
<title>queue()函数-脚本之家</title>
<style type="text/css">
.box{
width:300px;
height:150px;
}
.mytest{
width:50px;
height:50px;
background-color:green;
position:absolute;
left:0px;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript" src="https://www.jb51.net/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:"+=200"},3000);
$(".mytest").animate({top:"+=50"},2000);
$(".mytest").queue(function(){
$(this).text("动画还将持续");
$(this).dequeue();
});
$(".mytest").animate({left:"-=200"},3000);
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})
</script>
</head>
<body>
<div>
<div></div>
</div>
<button>点击开始动画</button>
<button>计算队列中函数数量</button>
</body>
</html>
以上代码实现了我们的要求，在代码中添加:
复制代码 代码如下:
$(this).dequeue();
也就是说通过queue()添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能够得到执行。