JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle

最新推荐文章于 2020-10-28 10:00:51 发布

_七七

最新推荐文章于 2020-10-28 10:00:51 发布

阅读量610

点赞数

分类专栏： JQuery 文章标签： js

本文链接：https://blog.csdn.net/qq_43472877/article/details/106768668

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

滑动显示和隐藏方式

slideDown([speed], [easing],[fn])
slideup( [ speed, [easing],[fn]])
slideToggle([speed], [easing],[fn])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>

    <script>
        //滑出显示div
        function slideDownFn() {
            $("#showDiv").slideDown("slow","linear")
        }

        //滑动收起div
        function slideUpFn() {
            $("#showDiv").slideUp("fast","swing")
        }

        //切换隐藏和显示
        function slideToggleFn() {
            $("#showDiv").slideToggle("slow")
        }
    </script>

</head>
<body>
    <input type="button" value="滑入显示div" onclick="slideDownFn()">
    <input type="button" value="滑动收起div" onclick="slideUpFn()">
    <input type="button" value="切换div的显示和隐藏" onclick="slideToggleFn()">

    <div id="showDiv" style="height: 200px; width:200px; background-color: pink">
        div显示和隐藏
    </div>
</body>
</html>

_七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle

滑动显示和隐藏方式slideDown([speed], [easing],[fn])slideup( [ speed, [easing],[fn]])slideToggle([speed], [easing],[fn])<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <scri
复制链接

扫一扫