jQuery 效果 - 滑动

最新推荐文章于 2022-07-22 10:30:42 发布

Southern Wind

最新推荐文章于 2022-07-22 10:30:42 发布

阅读量530

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/nanchen_J/article/details/120078824

版权

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

效果如下（图一）：

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

jQuery slideDown()

向下滑动元素。

语法：$(selector).slideDown(speed,callback);

speed 显示效果的时长。它可以取以下值：slow、fast 或者毫秒数。

callback 滑动完成后所执行的函数名称。

（图二）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slideDown()方法</title>
    <style>
        #div1{
            width: 100%;
            height: 30px;
            background-color: gray;
            text-align: center;
        }
        #div2{
            width: 100%;
            height: 300px;
            background-color: greenyellow;
            text-align: center;padding-top: 135px;
            box-sizing: border-box;
            display: none;
        }
    </style>
</head>
<body>
    <div id="div1">点击下滑整个盒子</div>
    <div id="div2">这是一个大盒子</div>
    <script src="../jquery-3.6.0.js"></script>
    <script>
       $(document).ready(function(){
        $('#div1').click(function(){
            $('#div2').slideDown();         //方法更换即可
        })
       })
    </script>
</body>
</html>

效果如（图三）所示：