jQuery之滑入与滑出

远近高低各不同

于 2023-12-19 16:20:49 发布

阅读量359

点赞数 7

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_74577714/article/details/135087809

版权

在我们jQuery中为我们封装了许多好玩的东西，让我为大家介绍一下滑入与滑出吧！
slideUp()滑出
slideDown()滑入
slideToggle()切换滑入滑出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>点击滑出</button>
    <button>点击滑入</button></button>
    <button>点击切换滑入滑出</button>
    <div></div>
</body>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
    // 给淡出button设置点击事件
    $("button").eq(0).click(function () {
        // $("div").slideUp(多少毫秒完成滑出)
        // 不设置毫秒也是可以的
        $("div").slideUp()
    })
    // 给淡入button设置点击事件
    $("button").eq(1).click(function () {
        // $("div").slideDown(多少毫秒完成滑入)
        // 不设置毫秒也是可以的
        $("div").slideDown()
    })
    // 给切换滑入滑出按钮设置点击事件
    $("button").eq(2).click(function () {
        // $("div").slideToggle(多少毫秒完成滑入或滑出)
        // 不设置毫秒也是可以的
        $("div").slideToggle()
    })
</script>
</html>

效果图：
请添加图片描述

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

远近高低各不同

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
jQuery之滑入与滑出

/ 给淡出button设置点击事件。// 给淡入button设置点击事件。// 给切换滑入滑出按钮设置点击事件。// 不设置毫秒也是可以的。// 不设置毫秒也是可以的。// 不设置毫秒也是可以的。
复制链接

扫一扫