淡入淡出动画例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            #box{
                width: 150px;
                height: 150px;
                background: blue;
                display: none;
            }
    
            #window{
                position: absolute;
                right: 3px;
                bottom: 3px;
                width: 300px;
                height: 320px;
                background: lightblue;
                display: none;
            }
    
            #close{
                position: absolute;
                right: 2px;
                top: 2px;
                font-size: 20px;
                color: red;
            }
        </style>
</head>
<body>
        <button id="fadeIn">fadeIn</button>
        <button id="fadeOut">fadeOut</button>
        <input type="text" id="opacity">
        <button id="fadeTo">fadeTo</button>
        <button id="fadeToggle">fadeToggle</button>
        <div id="box"></div>
    
        <div id="window">
            <div id="title">
                <span id="close">&times;</span>
            </div>
            <div id="content"></div>
        </div>
        <script src="lib/jquery-2.2.2.js"></script>
        <script>
            $(function(){
                // $('#fadeIn').click(function(){
                //     $('#box').fadeIn(4000);
                // });
                // $('#fadeOut').click(function(){
                //     $('#box').fadeOut(3000);
                // });
                // $('#fadeTo').click(function(){
                //     $('#box').fadeTo(3000,$('#opacity').val());
                // });
                // $('#fadeToggle').click(function(){
                //     $('#box').fadeToggle(3000);
                // });

                $('#window').fadeIn(2000);
                $('#close').click(function(){
                    $('#window').fadeOut(2000);
                });
                setTimeout(function(){
                    $('#window').fadeOut(2000);
                },10000);
            });
        </script>
    
</body>
</html>
淡入淡出动画例子

猜你喜欢
