jQuery效果-淡入淡出-滑动-回调

它的眼角开过光 / 2023-05-06 / 原文

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../JQuery/jquery-1.8.0.min.js"></script>
    <script src="JavaScript1.js"></script>
    <style>
        #content, #flipshow, #fliphide, #fliptoggle {
            padding: 5px; /*边距*/
            text-align: center; /*文字居中*/
            background-color: #ffd800;
            border: solid 1px #ff6a00; /*边框1px*/
        }
        #content {
            padding: 50px; /*边距*/
            display: none; /*内容隐藏*/
        }
    </style>
</head>
<body>
    <!--淡入淡出-->
    <button id="in">fadeIn</button>
    <button id="out">fadeOut</button>
    <button id="toggle">fadetoggle</button>
    <button id="to">fadeto</button>
    <div id="div1" style="width:80px;display:none; height:80px;background-color:aqua"></div>
    <div id="div2" style="width: 80px; display: none; height: 80px; background-color: #b6ff00"></div>
    <div id="div3" style="width: 80px; display: none; height: 80px; background-color: #0026ff"></div>

    <!--滑动-->
    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="fliptoggle">隐藏显示</div>
    <div id="content">Hello World</div>

    <!--回调-->
    <button id="btn1">隐藏</button>
    <p>hello Worldhello Worldhello World</p>
</body>
</html>

JS文件：

$(document).ready(function () {
    //显示隐藏
    $("#in").on("click", function () {
        $("#div1").fadeIn(1000);
        $("#div2").fadeIn(1000);
        $("#div3").fadeIn(1000);

    });

    $("#out").on("click", function () {
        $("#div1").fadeOut(1000);
        $("#div2").fadeOut(1000);
        $("#div3").fadeOut(1000);
    });
    $("#toggle").on("click", function () {
        //$("#div1").fadeToggle(1000);
        //$("#div2").fadeToggle(1000);
        //$("#div3").fadeToggle(1000);

        console.log("D" + document);
        console.log("D");
    });
    $("#to").on("click", function () {
        $("#div1").fadeTo(1000,0.5);//第二个参数为透明度0-1
        $("#div2").fadeTo(1000,0.7);
        $("#div3").fadeTo(1000,0.3);
    });

    //滑动
    $("#flipshow").click(function () {
        $("#content").slideDown(1000);//隐藏到显示为1S
    })
    $("#fliphide").click(function () {
        $("#content").slideUp(1000);//显示到隐藏为1S
    })
    $("#fliptoggle").click(function () {
        $("#content").slideToggle(1000);//
    })
    
    //回调
    $("#btn1").click(function () {
        $("p").hide(1000, function () {
            alert("动画结束方法被回调");
        });
        //执行多个动画
        $("p").css("color", "red").slideUp(1000).slideDown(1000);
    });
});