zoukankan      html  css  js  c++  java
  • Callback方法和JQuery链的解释

      这里讲到了一条语句运行多个JQuery方法(同一个元素)和动画100%完成后执行的callback方法。

      

    <!DOCTYPE html>
    <html>
    <head>
        <title>Callback方法和链的解释</title>
        <script type="text/javascript" src="../jquery.min.js"></script>
        <script type="text/javascript">
            // Callback函数在当前动画100%完成后执行。
            // 例子1:在隐藏效果完全实现后回调函数
            // $(function(){
            //     $('button').click(function(){
            //         $('p').hide(1000,function(){
            //             alert('段落现在被隐藏了');
            //         })
            //     })
            // })
    
            // 例子2,没有回调函数,警告框会在隐藏效果完成前弹出
            // $(function(){
            //     $('button').click(function(){
            //         $('p').hide(1000);
            //         alert('没有回调函数,警告框会在隐藏效果完成前弹出');
            //     })
            // });
    
            // 通过上面两个不同的案例:
            // 可以得出callback回调的用法
            // 令人奇怪的是同时hide(),含有回调函数的,隐藏过程相对慢一点
    
    
            // 链(Chaining)准许我们在一条语句上运行多个JQuery方法(
            // 在相同的元素上)
            // 优点,浏览器就不必多次查找相同的元素,如需要链接一个动作,你只需要
            // 简单的把该动作追加到之前的动作上。
    
            // 我们把css(),slideUp(),slideDown()链接在一起。使元素首先变为红色,然后
            // 向上滑动,再然后向下滑动
            // $(function(){
            //     $('button').click(function(){
            //         $('p').css('color','red').slideUp().slideDown();
            //     })
            // })
    
            // 提示,当进行链接时,代码行会变得很差,不过,jquery
            // 语法不是很严格。
            $(function(){
                $('button').click(function(){
                    $('p').css('color','red')
                    .hide(1000)
                    .show(1);
                })
            })
            // 通过测试可只对于show()和hide()不能同时链接,如果放在一起需要
            // 加上动画时间才能正确显示出来
        </script>
    </head>
    <body>
        <!-- <button>隐藏</button>
        <p>隐藏效果完全实现后回调函数</p> -->
        <button>点我</button>
        <p>菜鸟教程!</p>
    </body>
    </html>
  • 相关阅读:
    Android 剪贴板操作方法在不同版本API下的使用
    Android android:persistentDrawingCache的几个默认属性值介绍
    android 4.0 external下功能库说明
    Android gc overhead limit exceeded
    android onTerminate()方法调用需要注意的点
    android onTrimMemory()和onLowMemory()
    思维游戏(3)之时间问题
    思维游戏(2)之几根蜡烛
    思维游戏之分辨姐妹(1)
    如何根据用例图写出用例描述
  • 原文地址:https://www.cnblogs.com/LoveMarvin/p/8379442.html
Copyright © 2011-2022 走看看