码迷,mamicode.com
首页 > Web开发 > 详细

14. jQuery 的折叠动画

时间:2021-06-02 12:04:11      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:value   line   input   nbsp   rgba   mic   charset   html   rip   

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 的折叠动画

标签:value   line   input   nbsp   rgba   mic   charset   html   rip   

原文地址:https://www.cnblogs.com/bi-hu/p/14814988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!