jQuery学习二-动画-滑动

最新推荐文章于 2021-02-23 21:37:53 发布

Mr丶M

最新推荐文章于 2021-02-23 21:37:53 发布

阅读量257

点赞数

分类专栏：前端文章标签： jquery 动画

本文链接：https://blog.csdn.net/qq_34390576/article/details/78231432

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

现在总结一下jQuery的动画之一滑动，它的方法是slideDown(duration)，slideUp(duration)，slideToggle(duration)。它实现了内容的上下滑动隐藏，显示。

下面是简单的实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
    <div id="flipShow">显示</div>
    <div id="flipUp">隐藏</div>
    <div id="flipToggle">显示/隐藏</div>
    <div id="content">内容</div>
</body>
</html>

test.css

#flipShow , #content , #flipUp , #flipToggle{
    padding: 5px;
    text-align: center;
    border: solid 1px;
}
#content{
    display: none;
    padding: 50px;
    background-color: red;
}
#flipShow , #flipUp , #flipToggle{
    background-color: blue;
}

test.js

$(document).ready(function () {
    $("#flipShow").click(function () {
        $("#content").slideDown(1000);
    });
    $("#flipUp").click(function () {
        $("#content").slideUp(1000);
    });
    $("#flipToggle").click(function () {
        $("#content").slideToggle(1000);
    });
});