哪位老大给解释一下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.当点击后，代码的执行顺序是怎么样的，明白的请详细地说一下吧
谢谢

解决方案 »

  1.   

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