jQuery动画之显示动画

显示动画

以下面一个代码示例：

<!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()执行完毕后，就会执行此函数。

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

jQuery动画之显示动画

显示动画

猜你喜欢