利用jQuery Queue实现的小动画

浏览数：9 / 时间：2015年06月09日

针对以下html，编写代码使点击show按钮后 li逐个从左到右显示出来

<ul>
    <li >aaaaa</li>
    <li >bbbbb</li>
    <li >ccccc</li>
    <li >ddddd</li>
</ul>
<br style="clear: both;">
<input type="button" value="Show" id="showQueue"/>

#1.利用bind函数（bind和apply与call的区别：都可以达到偷换this的效果，但是apply和call是运行时偷换，而bind是绑定）

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
        function exec2B(){
            $(document).dequeue("colin");
        }

        function callback(){
            this.animate({"left":0},"slow",exec2B);
        }
       $(function(){
           $("ul li").each(function(idx){
               var currentLi=$(this);
               //使用bind，ECMAScript5中的新函数
               $(document).queue("colin",callback.bind(currentLi));
           });
           $("#showQueue").click(function(){
               exec2B();
           });
       });

</script>

#2 利用闭包

   <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
   <script type="text/javascript">
        function exec2B(){
            $(document).dequeue("colin");
        }
        
       $(function(){
           $("ul li").each(function(idx){
               var currentLi=$(this);
               //利用闭包，缓存了currentLi
               $(document).queue("colin",function(){
                   currentLi.animate({"left":0},"slow",exec2B);
               });
           });
           $("#showQueue").click(function(){
               exec2B();
           });
       });
    </script>