JQuery animate动画

时间 2019-11-17
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate动画</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  相似于原生animation动画. 属性变更产生动画.
            $('.div1').click(function(){    
                $(this).animate({"width":500},100,function(){
                    $(this).animate({"height":500},100,function(){

                        $(this).animate({"backgroundColor":"red"})
                    })
                })
            })
        /*
        1.animate语句和css().语句同样, 能够直接调用style属性, 且调用过程中都须要用大括号包含所调用内容.
        2.animate参数可跟三个,  ({"1.style属性":'属性的参数',"另外一个属性":"另外一个属性的参数"},动画持续时间,动画结束后调用的函数)
        三个参数分别用,隔开.
        3.animate没法调用背景颜色参数.
        4.animate内, 和css(). 同样,  能够在style参数后面直接写数字,不用加单位和引号
        */
            $('.div2').click(function(){

                $(this).animate({'width':'+=100px'})

            })


            
        })



    </script>
    <style>
        .div1{
            
            width: 300px;
            height: 100px;
            margin: 50px auto;
            background-color: gold;
        }        
    
        .div2{
            
            width: 300px;
            height: 100px;
            background-color: gold;
        }        
    


    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>