为jQuery扩展wait方法

为jQuery扩展wait方法

2009 5 29 09:00 AM 4982次查看

分类：JavaScript 标签：JavaScript, jQuery

做动画效果时，经常需要停顿一下，再进行之后的效果。但如果直接插入setTimeout，就会打断这个jQuery方法链，写起来就不够优雅了。

今天在shawphy的blog看到《jQuery的链式动画写法中加入setTimeout》一文，发现队列果然是个好东西，之前我还从未用过～

顺便将代码精简下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>Wait插件演示</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
      div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; }
    </style>
  </head>
  <body>
    <div></div>
    <script type="text/javascript">//<![CDATA[
      $.fn.extend({
        wait: function(time, type) {
          return this.queue(type || "fx", function() {
            var $this = $(this);
            setTimeout(function() {$this.dequeue();}, time || 1000);
          });
        }
      });
      (function () {
        $("div").wait()
        .animate({left:'+=200'},2000)
        .wait()
        .animate({left:'-=200'},1500, arguments.callee);
      })();
    //]]></script>
  </body>
</html>

嗯，这个wait方法有2个参数：time和type。
Time就不用介绍了，默认值这里设为1000毫秒了。
Type的默认值是"fx"，指的是jQuery.fx。因为animate默认是用这个fx扩展。如果是自己写的扩展，则可以改成自己的扩展名。一般情况下可以无视这个参数。

最后说下queue和dequeue。
queue(name, callback)这个用法是在name这个队列名的末尾加上callback函数。jQuery会依次执行队列中的函数的。
dequeue(name)则是移除并执行name这个队列名中的第一个函数。
它们之间相当于append和pop的关系（注意方向是反的）。

8条评论你不来一发么↓ 顺序排列倒序排列

向下滚动可载入更多评论，或者点这里禁止自动加载。

想说点什么呢？