jQuery效果-隐藏与显示 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../../Scripts/jquery-3.4.1.min.js"></script>
    <script src="Index.js"></script>
    <link type="text/css" rel="stylesheet" href="Style.css"/>
</head>
<body>
    <!--------------隐藏显示----------------->
    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button>

    <script>
        for (var i = 0; i < 5; i++) {
            $("<div>").appendTo(document.body);
        }
        $("div").click(function () {
            $(this).hide(2000, function () {
                $(this).remove();//每点击一个，消失之后，移除掉当前对象
            });//每一个都隐藏，使用this

        });//点击消失
    </script>
    <!--------------隐藏显示----------------->


</body>
</html>
div {
    background: #ece023;
    width: 50px;
    height: 50px;
    margin: 2px; /*外边距2px*/
    float: left; /*向左浮动*/
}

JS文件：

$(document).ready(function () {
    $("#hide").click(function () {
        $("p").hide(1000);//隐藏,可以加时间参数
    });
    $("#show").click(function () {
        $("p").show(1000);//显示,可以加时间参数
    });
    $("#toggle").click(function () {
        $("p").toggle(1000);//隐藏与显示
    });
});

 

posted @ 2023-04-26 21:24  它的眼角开过光  阅读(20)  评论(0)  编辑  收藏  举报