zoukankan      html  css  js  c++  java
  • 利用jQuery Queue实现的小动画

    针对以下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>

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

  • 相关阅读:
    Nginx TCP Proxy模块的编译安装
    树形dp hdu-4616-Game
    UVA 10405 Longest Common Subsequence (dp + LCS)
    MVC中使用EF(2):实现基本的CRUD功能
    [置顶] 关于Qt的学习
    BNU 26480 Horror List【最短路】
    汉语-词语-爱惜:百科
    汉语-词语-珍惜:百科
    汉语-词语-无知:百科
    汉语-词语-愚蠢:百科
  • 原文地址:https://www.cnblogs.com/okBabyfaceBoy/p/3548163.html
Copyright © 2011-2022 走看看