7.jQuery之显示与隐藏效果

这里用到三个函数方法：show()   hide()  toggle()

注意点是三个方法里面的两个参数的使用，前一个参数是时间，表示显示速度；后一个参数是回调函数，只有前面的动画执行完之后，回调函数才会执行

    <style>
        div {
             150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            // $("button").eq(0).click(function () {
            //     $("div").show(1000,function(){
            //         alert(1)  // 注意show的用法，前面的显示速度，后面是回调函数，当动画执行完以后，再执行回调函数，从浏览器可以看到效果，下面的hide同理
            //     })
            // });
            // $("button").eq(1).click(function () {
            //     $("div").hide()
            // })

            $("button").eq(2).click(function () {
                $("div").toggle()  // 这里的toggle也是有两个参数，方法同show
            })

            // 一般情况下，我们都不加参数直接显示隐藏就可以了

        })
    </script>