JQuery动画之滑入滑出动画

1. 滑入动画（类似于商店的卷帘门）

$(selector).slideDown(speed, 回调函数);

解释： 此语句实现的功能为， 在XX时间内， 下拉动画， 显现元素。

　　　当 slideDown() 中省略参数， 或者传入不合法的值是， 那么系统会使用默认值：400ms。

　　　回调函数可以省略不写。

示例代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery之滑入动画</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            display: none;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("#box").slideDown(5000, function () {
                alert("jQuery滑入动画结束");
            });
        })
    </script>
</body>
</html>

 

2. 滑出动画效果

$(selector).slideUp(speed, 回调函数);

解释： 此语句实现的功能为， 在XX时间内， 上拉动画， 显现元素。

　　　当 slideUp() 中省略参数， 或者传入不合法的值是， 那么系统会使用默认值：400ms。

　　　回调函数可以省略不写。

示例代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery之滑出动画</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            display: block;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("#box").slideUp(5000, function () {
                alert("jQuery滑出动画结束");
            });
        })
    </script>
</body>
</html>

 

3. 便捷滑入滑出动画效果

$(selector).slideToggle(speed, 回调函数);

使用此方法， 可以进行滑入滑出效果的切换， 此方法有两种情形：

（1）当元素的设置为：display = block; 也就是元素已经显示时， 使用 slideToggle()将会变成上拉隐藏。

（2）当元素的设置为：display = none; 也就是元素已经隐藏时， 使用 slideToggle()将会变成下拉显示。

回调函数可以省略不写。

示例代码如下：（元素属性 display = block;）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery之滑入滑出动画</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            display: block;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("#box").slideToggle(5000, function () {
                alert("jQuery滑入滑出动画结束");
            });
        })
    </script>
</body>
</html>

 

4. jQuery滑入滑出动画实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮控制元素滑入滑出</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            display: none;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            //点击“滑入”按钮， 实现元素显示
            $("button:eq(0)").click(function () {
                $(".box").slideDown(3000, function () {
                    alert("滑入动画执行完毕！");
                });
            });
            //点击“滑出”按钮， 实现元素隐藏
            $("button:eq(1)").click(function () {
                $(".box").slideUp(3000, function () {
                    alert("滑出动画执行完毕！");
                });
            });
            //点击“切换”， 实现元素间的显示/隐藏
            $("button:eq(2)").click(function () {
                $(".box").slideToggle(3000, function () {
                    alert("滑入/滑出动画执行完毕！");
                });
            });
        })
    </script>
</head>
<body>
    <button>滑入</button>
    <button>滑出</button>
    <button>切换</button>
    <div class="box"></div>
</body>
</html>

 

posted @ 2018-08-18 21:18  _杨魏  阅读(5466)  评论(0)    收藏  举报