夜光带你走进Jquery（七）擅长的领域

最新推荐文章于 2019-12-03 19:43:35 发布

GeniusTeam-夜光

最新推荐文章于 2019-12-03 19:43:35 发布

阅读量109

点赞数

分类专栏： Genius-Jquery

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102677163

版权

Genius-Jquery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

夜深万物静，可我自己用是静不下来，我此刻内心澎湃，总想找愿意聆听的人诉说我的故事

正文：

jQuery 效果 - 滑动

jQuery 滑动方法可使元素上下滑动。

jQuery 滑动方法

通过 jQuery

我们可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#panel").slideDown("slow");
            });
        });
    </script>

    <style type="text/css">
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>

<div id="flip">点滑下面板--团队</div>
<div id="panel">Genius  Team</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#panel").slideUp("slow");
            });
        });
    </script>

    <style type="text/css">
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
        }
    </style>
</head>
<body>

<div id="flip">点滑下面板--团队</div>
<div id="panel">Genius  Team</div>

</body>
</html>

jQuery slideToggle() 方法

整合进下拉和上划

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#panel").slideToggle("slow");
            });
        });
    </script>

    <style type="text/css">
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>

<div id="flip">点滑下面板--团队</div>
<div id="panel">Genius  Team</div>

</body>
</html>