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>
秒客网

Callback方法和JQuery链的解释

相关文章
