87,921
社区成员
发帖
与我相关
我的任务
分享哪位老大给解释一下jQuery的queue的用法？
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
Click here...
<div></div>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
1.看了几天queue了，感觉一点没有理解它的工作方式
2.上面的代码中，当没有点击时，queue函数起不起作用？没有点击时，有没有队列？
3.当点击后，代码的执行顺序是怎么样的，明白的请详细地说一下吧
谢谢
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
Click here...
<div></div>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
1.看了几天queue了，感觉一点没有理解它的工作方式
2.上面的代码中，当没有点击时，queue函数起不起作用？没有点击时，有没有队列？
3.当点击后，代码的执行顺序是怎么样的，明白的请详细地说一下吧
谢谢
...全文
请发表友善的回复…
发表回复
zlcqupt 2010-09-19
- 打赏
- 举报
谢谢，简直茅厕顿开啊
passself 2010-09-19
- 打赏
- 举报
楼上帮你解决了
hoojo 2010-09-19
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>quee.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.newcolor {
background-color: red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").click(function () {//没有点击，就没有执行下面的方法；其中$("div").queue就没有执行，所以无法获取特效方法队列
$("div").show("slow");//1运行
$("div").animate({left:'+=200'},2000);//2运行
$("div").queue(function () {//3运行
//alert(this.innerHTML);
$(this).addClass("newcolor");//为所有div的newcolor样式
$(this).dequeue();//4执行这个方法，就会移除队列中第一个特效函数$(this).show("slow");//1运行
//并执行这个特效
});
$("div").animate({left:'-=200'},500);//5运行
$("div").queue(function () {//6运行
//alert(this.innerHTML);
$(this).removeClass("newcolor");//删除newcolor
$(this).dequeue();//7运行，//2运行，并移除2$(this).animate({left:'+=200'},2000);
});
$("div").slideUp();
});
});
</script>
</head>
<body>
<div>abc</div>
</body>
</html>
