首页 > Web开发 > 详细

利用jQuery Queue实现的小动画

时间:2014-02-13 23:54:53      阅读:562      评论:0      收藏:0      [点我收藏+]

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

bubuko.com,布布扣
<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"/>
bubuko.com,布布扣

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

bubuko.com,布布扣
<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>
bubuko.com,布布扣

#2 利用闭包

bubuko.com,布布扣
   <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>
bubuko.com,布布扣

 

 

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

利用jQuery Queue实现的小动画

原文:http://www.cnblogs.com/okBabyfaceBoy/p/3548163.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!