jQuery中動畫animate(上)

時間 2019-11-17

原文原文鏈接

jQuery中動畫animate(上)

有些複雜的動畫經過以前學到的幾個動畫函數是不可以實現，這時候就須要強大的animate方法了javascript

操做一個元素執行3秒的淡入動畫，對比一下2組動畫設置的區別css

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

顯而易見，animate方法更加靈活了，能夠精確的控制樣式屬性從而執行動畫html

語法：java

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

.animate()方法容許咱們在任意的數值的CSS屬性上建立動畫。2種語法使用，幾乎差很少了，惟一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對相似，除了屬性範圍作了更多限制。第二個參數開始能夠單獨傳遞多個實參也能夠合併成一個對象傳遞了jquery

參數分解：算法

properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意全部用於動畫的屬性必須是數字的，除非另有說明；這些屬性若是不是數字的將不能使用基本的jQuery功能。好比常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不能夠，由於參數是red或者GBG這樣的值，很是用插件，不然正常狀況下是不能只用動畫效果的。注意，CSS 樣式使用 DOM 名稱（好比 "fontSize"）來設置，而非 CSS 名稱（好比 "font-size"）。ide

特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %須要指定使用函數

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

除了定義數值，每一個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式容許定製隱藏和顯示動畫用來控制元素的顯示或隱藏性能

.animate({
    width: "toggle"
});

若是提供一個以+= 或 -=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的動畫

.animate({ 
    left: '+=50px'
}, "slow");

duration時間

動畫執行的時間，持續時間是以毫秒爲單位的；值越大表示動畫執行的越慢，不是越快。還能夠提供'fast' 和 'slow'字符串，分別表示持續時間爲200 和 600毫秒。

easing動畫運動的算法

jQuery庫中默認調用 swing。若是須要其餘的動畫算法，請查找相關的插件

complete回調

動畫完成時執行的函數，這個能夠保證當前動畫肯定完成後發會觸發

具體能夠參考下面的代碼效果：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    p {
        color: red;
    }
    div{
        width:200px; 
        height: 100px; 
        background-color: yellow;
        color:red;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>animate(上)</h2>
    <p>慕課網,專一分享</p>
    <div id="aaron">內部動畫</div>
    點擊觀察動畫效果：
    <select id="animation">
        <option value="1">動畫1</option>
        <option value="2">動畫2</option>
        <option value="3">動畫3</option>
        <option value="4">動畫4</option>
    </select>
    <input id="exec" type="button" value="執行動畫">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            // 數值的單位默認是px
            $aaron.animate({
                width  :300,
                height :300
            });
        } else if (v == "2") {
            // 在現有高度的基礎上增長100px
            $aaron.animate({
                 width  : "+=100px",
                 height : "+=100px"
            });
        } else if (v == "3") {
            $aaron.animate({
                fontSize: "5em"
            }, 2000, function() {
                alert("動畫 fontSize執行完畢!");
            });
        } else if (v == "4") {
            //經過toggle參數切換高度
            $aaron.animate({
                width: "toggle"
            });
        } 
    });
    </script>
</body>
</html>