jQuery 滑动操作

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

GuanJINP

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

阅读量298

点赞数

分类专栏： jquery 文章标签： html jquery jquery滑动

本文链接：https://blog.csdn.net/weixin_42617075/article/details/81983275

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

body :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery滑动</title>
    <script src="jquery.min.js"></script>
    <script src="Move.js"></script>
    <style>
        #conteat,#flipshow,#fliphide,#fliptoggle{
            padding: 5px;
            text-align: center;
            background-color: lightblue;
            border: 1px lightblue solid;
        }
        #conteat{
            padding:50px;
            /*
             display: none; 让内容隐藏
            */
            display: none;
        }
    </style>
</head>
<body>
<div id="flipshow">点击</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">点击/隐藏</div>
<div id="conteat"> Hello World</div>
</body>
</html>

js 文件

$(document).ready(function () {
    $("#flipshow").click(function () {
        // slideDown 显示（执行时间）
        $("#conteat").slideDown(1000);
    });
    $("#fliphide").click(function () {
        // slideUp 隐藏（执行时间）
        $("#conteat").slideUp(1000);
    });
    $("#fliptoggle").click(function () {
        // slideUp 隐藏（执行时间）
        $("#conteat").slideToggle(1000);
    });

});