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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。