利用jQuery Queue实现的小动画

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

利用jQuery Queue实现的小动画
<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"/>
利用jQuery Queue实现的小动画

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

利用jQuery Queue实现的小动画
<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>
利用jQuery Queue实现的小动画

#2 利用闭包

利用jQuery Queue实现的小动画
   <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>
利用jQuery Queue实现的小动画

 

 

本案例的知识点是jQuery queue和dequeue的用法,已经bind和闭包的相关应用。

利用jQuery Queue实现的小动画

上一篇:阿里云Centos 6.3 64位 安全加固版 升级 Php 中的 Curl 7.19 到 7.35


下一篇:一步步学习ASP.NET MVC3 (8)——EmptyResult,ContentResult,RedirectResult