jQuery淡入淡出动画

fadeIn():淡入方法，让div显示，可加两个参数，第一个参数是时间，第二个是执行完淡入的回调函数

fadeOut:淡出方法，让div隐藏，可加两个参数，第一个参数是时间，第二个是执行完淡出的回调函数

fadeToggle():切换淡入淡出方法，div隐藏时点击就让它显示，显示时点击让它隐藏，可加两个参数，第一个参数是时间，第二个是执行完淡出的回调函数

fadeTo():淡入到方法，让div显示，但可以让它淡入大一个透明度，可加三个参数，第一个参数是时间，第二个参数是透明度，第三个是执行完淡出的回调函数

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            //margin:100px auto;
            width:200px;
            height:200px;
            background:red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            $('button').eq(0).click(function(){
                $('div').fadeIn(1000);
            })
            //$('button').eq(0).click(function(){
            //    $('div').fadeIn(1000,function(){
            //        console.log('淡入完成')
            //    });
            //})
            $('button').eq(1).click(function(){
                $('div').fadeOut(1000);
            })
            $('button').eq(2).click(function(){
                $('div').fadeToggle(1000);
            })
            $('button').eq(3).click(function(){
                $('div').fadeTo(1000,0.5);
            })
        })
        
    </script>
    
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
</body>
</html>

效果图

 

posted @ 2018-11-14 14:03  大C文  阅读(280)  评论(0)    收藏  举报