14. jQuery 的折叠动画

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于14. jQuery 的折叠动画的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 折叠动画不流畅

jQuery 将 div 切片成动画片段

几个非常实用的JQuery代码片段

基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

一起为多个列表项设置动画（展开/折叠）

十条jQuery代码片段助力Web开发效率提升