jQuery动画之显示隐藏动画

1. 显示动画

以下面一个代码示例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery显示动画</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color: #ff6700;

            display: none;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

显示动画的方式有三种方式

方式一：

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(".box").show();

    </script>

解释：使用show()，不带有参数，表示让指定的元素直接显示出来。

　　　其实这个方法的底层就是通过display：block;实现。

方式二：

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    //在3秒内逐渐显示

    $(".box").show(3000);

</script>

解释：使用show(数值)，表示在一定时间之内，逐渐显示出来。

　　　这种方法是通过控制元素的宽高、透明度、display属性来说实现的。

方式三：

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

   $(function () {

       $(".box").show("slow");

   })

</script>

解释：通过参数，使用show(), 参数可以为：

　　　(1) slow(慢)： 600ms;

　　　(2) normal(普通)： 400ms；

　　　(3) fast(快)： 200ms;

　　　通过这种方式调用show()，也是空过控制元素的宽高、透明度、display属性来实现的。

补充：在动画执行完毕后，执行另外的程序

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function () {

            $(".box").show("faster", function () {

                alert("动画执行完毕")

            });

        })

    </script>

解释：这种方式，是在show()中加入了一个函数，当show()执行完毕后，就会执行此函数。

　　　可以在方式一、方式二、方式三中都可以加入此函数。

2. 隐藏动画

示例代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuer隐藏动画</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color: #ff6700;

            display: block;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

隐藏动画和显示动画的方式相同，都具有三种方式，区别在于隐藏动画使用hide()方法。

方式一：

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            $(".box").hide();

        })

    </script>

解释：这种方式是通过hide()直接进行隐藏，hide()中没有任何参数。

　　　方式的底层是通过 display: none; 实现

方式二：

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            $(".box").hide(3000);

        })

    </script>

解释：使用 hide(数值) ，表示在一定时间内，逐渐隐藏。

　　　这种方法是通过控制元素的宽高、透明度、display属性来说实现的。

方式三：

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            $(".box").hide("normal");

        })

    </script>

解释：通过参数，使用 hide(), 参数可以为：

　　　(1) slow(慢)： 600ms;

　　　(2) normal(普通)： 400ms；

　　　(3) fast(快)： 200ms;

　　　通过这种方式调用 hide()，也是空过控制元素的宽高、透明度、display属性来实现的。

补充：在动画执行完毕后，执行另外的程序

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function () {

            $(".box").hide("faster", function () {

                alert("动画执行完毕")

            });

        })

    </script>

解释：这种方式，是在 hide() 中加入了一个函数，当 hide() 执行完毕后，就会执行此函数。

　　　可以在方式一、方式二、方式三中都可以加入此函数。

3. 显示隐藏示例

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>按钮控制图片显示隐藏</title>

    <style>

        #box{

            width: 200px;

            height: 200px;

            display: none;

            background-color: #ff6700;

            border: 1px solid green;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <button id="btn">显示</button>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

            $(function () {

                var is_show = true;

                $("#btn").click(function () {

                    if (is_show){

                        $("#box").show(3000, function () {

                            $(this).text("盒子出来");

                            $("#btn").text("隐藏");

                            is_show = false;

                        })

                        }else{

                        $("#box").hide(3000, function () {

                            $(this).text("");

                            $("#btn").text("显示");

                            is_show = true;

                        })

                    }

                })

            })

    </script>

</body>

</html>

4. 便捷方式实现显示隐藏动画

可以功过 toggle() 便捷的实现显示和隐藏的来回切换，语法格式如下：

$("#box").toggle(3000, function () {

 })

但是这种方法有一个不足之处，那就是在执行时，会先执行show()，然后再执行hide()

使用 toggle() 的示例代码如下:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>按钮控制图片显示隐藏</title>

    <style>

        #box{

            width: 200px;

            height: 200px;

            display: none;

            background-color: #ff6700;

            border: 1px solid green;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <button id="btn">显示</button>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            $("#btn").click(function () {

                $("#box").toggle(3000, function () {

                    $(this).text("盒子显示");

                    if($("#btn").text() == "隐藏"){

                        $("#btn").text("显示");

                    }else{

                        $("#btn").text("隐藏");

                    }

                })

            })

        })

    </script>

</body>

</html>