jQuery实现淡入淡出

淡入淡出可以让我们的网页更加美观，更加丰富，今天来看一下淡入淡出效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/jquery-3.4.1.js"></script>
        <style>
            #one{
                width: 100px;
                height: 100px;
                background-color: lightblue;
                display: none;
                position: absolute;
                top: 50px;
            }
            #two{
                width: 100px;
                height: 100px;
                background-color: hotpink;
                display: none;
                position: absolute;
                top: 150px;
            }
            #three{
                width: 100px;
                height: 100px;
                background-color: yellow;
                display: none;
                position: absolute;
                top: 250px;
            }
        </style>
    </head>
    <body>
        <button id="but1">点击淡入</button>
        <button id="but2">点击淡出</button>
        <div id="one"></div>
        <div id="two"></div>
        <div id="three"></div>
        <button id="but3" >消失</button>
        <div id="four" style="margin-left: 140px;">拜拜啦~</div>
    </body>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#but1").click(function(){
                $("#one").fadeIn(1000);
                $("#two").fadeIn(1200);
                $("#three").fadeIn(1400);
                $("#one").animate({left:'250px'},1000);
                $("#two").animate({left:'150px'},800);
                $("#three").animate({left:'50px'},700);
            })
        });
        $(document).ready(function(){
            $("#but2").click(function(){
                $("#one").animate({left:'0px'},1000);
                $("#two").animate({left:'0px'},800);
                $("#three").animate({left:'0px'},700);
                $("#three").fadeOut(1000);
                $("#two").fadeOut(3000);
                $("#one").fadeOut(5000);

            })
        })
        $(document).ready(function(){
            $("#but3").click(function(){
                $("#four").hide(2000,function(){
                    alert("再见了，妈妈我今晚，就要远航")
                })
            })
        })

    </script>
</html>

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/137649990

目录