jq预习动画

最新推荐文章于 2024-10-08 13:51:35 发布

Hevenn

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量70

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Hevenn/article/details/128859702

版权

jq预习之动画

动画效果
完整代码展示

动画效果

隐藏显示

<button id="btn1">隐藏box</button>;
<button id="btn2">显示box</button>;
<button id="btn3">显示|隐藏box</button>;
  $("#btn1").click(function () {
        $("#box").hide(800);
    })
    $("#btn2").click(function () {
        $("#box").show(800);
    })
    $("#btn3").click(function () {
        $("#box").toggle(800);
    })

滑动隐藏显示

<button id="btn4">滑动隐藏box</button>;
<button id="btn5">滑动显示box</button>;
<button id="btn6">滑动显示|隐藏box</button>;
$("#btn4").click(function () {
        $("#box").slideUp(800);
    })
    $("#btn5").click(function () {
        $("#box").slideDown(800);
    })
    $("#btn6").click(function () {
        $("#box").slideToggle(800);
    })

淡出隐藏显示

<button id="btn7">淡出隐藏box</button>;
<button id="btn8">淡入显示box</button>;
<button id="btn9">淡入淡出显示|隐藏box</button>;
<button id="btn10">淡出到指定的值-box</button>;
 $("#btn7").click(function () {
        $("#box").fadeOut(800);
    })
    $("#btn8").click(function () {
        $("#box").fadeIn(800,function () {
            $("#box").css("background","pink")
        });
    })
    $("#btn9").click(function () {
        $("#box").fadeToggle(800,function () {//回调函数，前面的事情做完之后执行的内容
            console.log(111)
        });
    })
    $("#btn10").click(function () {
        $("#box").fadeTo(800,0.6,function () {

        });
    })

完整代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #608E26;
        }
    </style>
</head>
<body>
<!--缩小放大-->
<button id="btn1">隐藏box</button>
<button id="btn2">显示box</button>
<button id="btn3">显示|隐藏box</button>
<hr>
<h2>滑动</h2>
<button id="btn4">滑动隐藏box</button>
<button id="btn5">滑动显示box</button>
<button id="btn6">滑动显示|隐藏box</button>

<hr>
<h2>滑动</h2>
<button id="btn7">淡出隐藏box</button>
<button id="btn8">淡入显示box</button>
<button id="btn9">淡入淡出显示|隐藏box</button>
<button id="btn10">淡出到指定的值-box</button>

<div id="box"></div>

<script src="jquery3.6.1.js"></script>
<script>
    /*jquery封装动画*/
    //缩小放大
    $("#btn1").click(function () {
        $("#box").hide(800);
    })
    $("#btn2").click(function () {
        $("#box").show(800);
    })
    $("#btn3").click(function () {
        $("#box").toggle(800);
    })

    //滑动
    $("#btn4").click(function () {
        $("#box").slideUp(800);
    })
    $("#btn5").click(function () {
        $("#box").slideDown(800);
    })
    $("#btn6").click(function () {
        $("#box").slideToggle(800);
    })

    /*淡入淡出*/
    $("#btn7").click(function () {
        $("#box").fadeOut(800);
    })
    $("#btn8").click(function () {
        $("#box").fadeIn(800,function () {
            $("#box").css("background","pink")
        });
    })
    $("#btn9").click(function () {
        $("#box").fadeToggle(800,function () {//回调函数，前面的事情做完之后执行的内容
            console.log(111)
        });
    })
    $("#btn10").click(function () {
        $("#box").fadeTo(800,0.6,function () {

        });
    })
</script>
</body>
</html>