14. jQuery 的折叠动画

jQuery 的折叠动画 + jQuery 提供了三种折叠动画 ( 看之前参考一下13 )

1. slideDown()
+ 下拉显示

2. slideUp()
+ 上拉隐藏

3. slideToggle()
+ 切换显示和隐藏

三个方法都是一样的参数
=> 方法名(时间, 运动曲线, 回调函数)

这三个方法名很好记啊  slide 在边框哪里是直线的意思  那么在这里 slideDown 就是 直线下 slideUp就是直线上 ..还有一个就是直线切换咯...无聊死了

和13的一樣啊 只不过这里是 上和下 13 是默认

 

例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jqsourse.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
        }
        input{
            margin-top: 10px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<input class="show" type="button" value="显示">
<input class="hide" type="button" value="隐藏">
<input class="toggle" type="button" value="切换">
<div></div>

<script>

    $('.show').click(()=>{
        $('div').slideDown(1000,'linear',()=>{
            console.log("显示div");
        })
    });

    $('.hide').click(()=>{
        $('div').slideUp(1000,'linear',()=>{
            console.log("隐藏div");
        })
    });

    $('.toggle').click(()=>{
        $('div').slideToggle(1000,'linear',()=>{
            console.log("切换div");
        })
    });

</script>
</body>
</html>

 

posted @ 2021-05-26 20:50  咸瑜  阅读(131)  评论(0)  编辑  收藏  举报