jQuery中的动画效果(隐藏与显示)

1.隐藏

　　hide() 方法来隐藏 HTML 元素

　　语法：

　　　　$(selector).hide(speed,callback);

　　　　参数:

　　　　　　speed:隐藏的速度，可以取以下值："slow"、"fast" ,"normal"或毫秒。

　　　　　　　　slow->600

　　　　　　　　normal->400

　　　　　　　　fast->200

　　　　　　callback:隐藏完成后所执行的函数名称

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <button id="btn1">hide</button>
    <button id="btn2">show</button>
    
    <script type="text/javascript">
        $(document).ready(function(){
            var $div = $("#box1")
            $("#btn1").click(function(){
                $div.hide("1000",function(){
                    console.log("动画结束了")
                })
            })
        })
    </script>
</body>

　　输出：

  2.显示

　　show() 方法来显示 HTML 元素

　　语法：

　　　　$(selector).show(speed,callback);

　　　　参数:

　　　　　　speed:隐藏的速度，可以取以下值："slow"、"fast" ,"normal"或毫秒。

　　　　　　　　slow->600

　　　　　　　　normal->400

　　　　　　　　fast->200

　　　　　　callback:隐藏完成后所执行的函数名称

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <button id="btn1">hide</button>
    <button id="btn2">show</button>
    
    <script type="text/javascript">
        $(document).ready(function(){
            var $div = $("#box1")
            // 隐藏
            $("#btn1").click(function(){
                $div.hide("1000",function(){
                    console.log("隐藏")
                })
            })
            // 显示
            $("#btn2").click(function(){
                $div.show("1000",function(){
                    console.log("显示")
                })
            })
        })
    </script>
</body>

　　输出：

 3.一个按钮实现隐藏和显示

　　toggle()方法来切换 hide() 和 show() 方法。

　　显示被隐藏的元素，并隐藏已显示的元素

　　语法：

　　　　$(selector).toggle(speed,callback);

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <button id="btn1">hide</button>
    <button id="btn2">show</button>
    <button id="btn3">toggle</button>
    
    <script type="text/javascript">
        $(document).ready(function(){
            var $div = $("#box1")
            // 隐藏
            $("#btn1").click(function(){
                $div.hide("1000",function(){
                    console.log("隐藏")
                })
            })
            // 显示
            $("#btn2").click(function(){
                $div.show("1000",function(){
                    console.log("显示")
                })
            })
            // 一个按钮实现显示隐藏
            $("#btn3").click(function(){
                $div.toggle("1000",function(){
                    console.log("自动切换")
                })
            })
        })
    </script>
</body>

　　输出：

 

posted @ 2020-05-17 09:25  abner_pan  阅读(1689)  评论(0)    收藏  举报