master

分支 (52)

管理

管理

master

p3_2210A_ZhangHan

p3_2210A_ZhangJiaDe

p3_2210A_zhouJianDong007

P3_2210A_xueSiHao

p3_2210A_yaoXueKe

P3_2210A_wangJiaZhe

P3_2210A_maGuangLei

P3_2210A_SongHua

P3_2210A_maqiang

p3_2210A_jiaoZhaoQi

p3_2210A_wangxiang_day07

p3_2210A_shengMingShuo

p3_2210A_yanghai

P3_2210A_songshuaib_day07

p3_2210a_liyunze_day07

P3-2201A-lizhenqing

P3_2210A_BianZeWen

p3_2210A_yangRui-day07

P3_2210A_GuoYaNan

p3_2201-a_day07
/
显示隐藏动画.html

<!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>Document</title>
    <script src="./lib/jquery-3.6.1.js"></script>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            display: none;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div>
        <button class="zhanshi">展示</button>
        <button class="yincang">隐藏</button>
        <button class="qiehuan">切换</button>
    </div>
    <script>
        /*
            显示隐藏:
            dom.show()
            dom.hide()
            dom.toggle()
            可选参数:
            参数1:(slow,normal,fast)或者毫秒数 2000预定义的速度
            参数2:默认:swing 可设置:linear 匀速 效果
            参数3:回调函数

        */
       $(".zhanshi").on("click",function(){
        $(".d1").show(1000,function(){
            $(".d1").css("background","pink")
        })
       })
       $(".yincang").on("click",function(){
        $(".d1").hide(1000,function(){
            $(".d1").css("background","pink")
        })
       })
       $(".qiehuan").on("click",function(){
        $(".d1").toggle(1000,function(){
            $(".d1").css("background","pink")
        })
       })
    </script>
</body>
</html>