jQuery入門筆記之（四）動畫效果

三省吾身丶丶發表於2016-01-06
原文網址 : https://flycode.co/archives/93561
jQuery筆記動畫

轉載自個人部落格

jQuery自帶動畫效果

一. 顯示、隱藏

jQuery中.show()為顯示方法，.hide()為隱藏方法。
在無引數的時候，只是硬性的顯示內容和隱藏內容。就不用程式碼來演示了，.hide()方法其實就是把物件的css設為display：none；而.show()方法會保留原來的display值，並進行設定。但是在一些場景中會有所改變，在後面進行說明）。
這兩個方法都可以帶引數。

先來說明第一個引數：

  1. 第一種用法是傳入數字，為毫秒數，表示動畫過渡效果的時間。裡面同時富含了勻速變大變小，以及透明度變換。

<button class="show">顯示</button>
<button class="hide">隱藏</button>
    <div id="box">塊</div>
<script>
    $(".show").click(function() {
        $("#box").show(1000);//顯示用了一秒
    });//可以看到很明顯的動畫過渡效果。
    $(".hide").click(function() {
        $("#box").hide(1000);
    });
</script>

  1. 第二種用法是傳入一個字串。”slow”、”normal”和”fast”，分別對應600毫秒、400毫秒和200毫秒。在傳入空字串或其他字串引數時，預設為400毫秒。

  2. 傳入一個物件，後面的引數就不能填了，都在物件中。這個比較強大，整合了show()方法的多種引數實現效果外，還有一些其他的方法，比如可以動畫執行中的狀態，來執行函式。比較複雜，而且日常使用的話，現在這個就已經夠了，在這裡並不做講述，有興趣的可以自己參考手冊。

特別注意：在傳入了速度之後，內聯元素inline，隱藏顯示過後會變成內聯塊，inline-block。假設你給一個內聯元素的css中設定了寬高，本來不生效，但是在執行隱藏顯示後寬高生效

第二個引數：為可選引數，easing運動方式，這個引數，大部分引數值需要通過外掛來使用，以後再來講解。自帶的引數有兩個：”swing”(緩動)、”linear”(勻速)，不填時，預設為”swing”。（注意這裡傳入一個錯誤引數，會報錯）

第三個引數：可選，回撥函式，第一個動畫執行完畢後執行，實現鏈式動畫。

<button class="show">顯示</button>
<button class="hide">隱藏</button>
<div class="test">一</div><div class="test">二</div><div class="test">三</div><div class="test">四</div>
<script>
    $(`.show`).click(function () {//鏈式動畫，遞迴自呼叫
     $(`.test`).first().show(`fast`, function testShow() {
         $(this).next(".test").show(`fast`, testShow);
       });//注意next中的限制條件，不然會干擾其他的元素，執行該函式。
    });
    $(`.hide`).click(function () {
     $(`.test`).last().hide(`fast`, function() {
         $(this).prev(".test").hide(`fast`, arguments.callee);
       });//這裡只是展現有arguments.callee這種方式，並不推薦使用，建議使用函式遞迴自呼叫
    });
</script>

我們在使用.show()和.hide()的時候，如果需要一個按鈕切換操作，需要進行一些條件判
斷。而 jQuery 提供給我們一個類似功能的獨立方法：.toggle()。使用方法一樣。

$(".toggle").click(function(){
    $("div").toggle("fast");
});

二. 滑動、捲動

jQuery 提供了一組改變元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顧名思義，向上收縮(捲動)和向下展開(滑動)。

$(`.toggle`).click(function () {
    $(`div`).slideToggle();
});

注意：滑動、捲動效果和顯示、隱藏效果一樣，具有相同的引數。不展開講

三. 淡入、淡出

jQuery 提供了一組專門用於透明度變化的方法：.fadeIn()和.fadeOut()，分別表示淡入、
淡出，當然還有一個自動切換的方法：.fadeToggle()。

但是上面三個透明度方法只能是從 0 到 100，或者從 100 到 0，如果我們想設定指定值就沒
有辦法了。而 jQuery 為了解決這個問題提供了.fadeTo()方法，使透明度到達指定值：

$(".toggle").click(function() {
    $("#box").fadeToggle(`slow`);
});
$(".to").click(function() {
    $("#box").fadeTo(`slow`, 0.3);//表示30，jQuery中使用的是百分比的形式來設定
});

注意：最先點選to透明度變成0.3，再點選toggle，第一次點選隱藏，第二次點選顯示透明度為0.3！（回到原有設定）

淡入、淡出和上面的顯示、隱藏效果一樣，具有相同引數

自定義動畫

jQuery提供了上面幾種簡單常用的固定動畫方面我們使用。但有些時候，這些簡單動畫無法滿足我們更加複雜的需求。這個時候，jQuery 提供了一個.animate()方法來建立我們的自定義動畫，滿足更多複雜多變的要求。
強烈建議先看我的《JavaScript完美運動框架的進階之旅》，使用JS基本實現了自定義動畫，只不過jQuery的更加全面完善，當然也更加複雜。

必傳引數只有一個，物件，實現動畫：

$("button").click(function() {
    $("#box").animate({
        width: "200px",
        height: "500px"});
});

這段程式碼已經實現了多重動畫同步運動的效果，使用鍵值對的方式，來表明運動動畫終點的位置。在實現上下左右移動時，需要結合CSS，把物體屬性設定絕對定位！

第二個引數，可選，使用字串時如同上面一樣的3個值表示不同的時間（預設400ms），數字型別時，使用毫秒方式。直接跟在第一個引數之後就好
第三個引數，可選，也和上面一樣，easing運動方式，自帶的引數有兩個：”swing”(緩動)、”linear”(勻速)，不填時，預設為”swing”。（注意這裡傳入一個錯誤引數，會報錯）
第四個引數，可選，回撥函式，在動畫執行完畢後執行，可實現鏈式動畫。

下面進行一些特殊的說明：

自定義動畫中，每次開始運動都必須是初始位置或初始狀態，而有時我們想通過當前位置或狀態下再進行動畫。jQuery 提供了自定義動畫的累加、累減功能。

$("button").click(function() {
    $("#box").animate({//必須先設定CSS的絕對定位。
        left:"+=100px"
    });
});

主要是說一下自定義動畫中的鏈式動畫，有兩種形式：

  1. 在回撥函式中再執行一個動畫，這個沒什麼好說的。

  2. 通過連綴或順序來實現鏈式動畫。

通過依次順序實現鏈式動畫

$(`button`).click(function () {
    $(`#box`).animate({`left` : `100px`});
    $(`#box`).animate({`top` : `100px`});
    $(`#box`).animate({`width` : `300px`});
});

注意：如果不是同一個元素，就會實現同步動畫

通過連綴實現鏈式動畫

$(`button`).click(function () {
    $(`#box`).animate({`left` : `100px`})
    .animate({`top` : `100px`})
    .animate({`width` : `300px`});
});

鏈式動畫進階

之前我們已經可以實現鏈式動畫了，如果是同一個元素，可以依次順序或連綴呼叫。如果是不同元素，可以使用回撥函式。但有時鏈式動畫太多，回撥函式的可讀性大大降低。為此，jQuery 提供了一組專門用於鏈式動畫的方法。

$(`#box`).slideUp(`slow`).slideDown(`slow`).css(`background`, `orange`);這段程式碼中，css方法會在一開始就執行。因為動畫方法可以用連綴來實現依次排列，但是css方法不是，會在一開始傳入佇列之前。如何解決呢？回撥函式當然可以實現。

$(`button`).click(function () {
    $(`#box`).slideUp(`slow`).slideDown(`slow`,function (){
        $(this).css(`background`, `orange`);
    });
});

這當然沒問題，但是那並不是我們應該做的，因為這樣可讀性太差了，鏈式動畫一多呢？原本的動畫都不清晰了吧？jQuery為我們實現了一個類似回撥函式的方法：.queue()。jQuery 的.queue()的回撥函式可以傳遞一個引數，這個引數是 next 函式，在結尾處呼叫這個 next()方法即可再連綴執行列隊動畫。（不這樣使用的話，後續動畫效果無法實現）

$(`button`).click(function () {//在同一個元素直接這樣寫就可以了。
    $(`#box`).slideUp(`slow`)
                .slideDown(`slow`)
                .queue(function (next) {
                    $(this).css(`background`, `orange`);
                    //next();//animate的動畫效果不會生效，因為把next()註釋掉了。
                })
                .animate({//記得設定絕對定位
                    height: "200px",
                    left: "100px"
                });
});

.queue()方法還有一個功能，就是可以得到當前鏈式動畫剩餘的長度（包括當前的動畫）。fx 是預設鏈條的引數。

//把上面的程式碼的第一個動畫改裝成如下模樣時，會彈出4。
$(`#box`).slideUp(`slow`,function  (){
    alert($(this).queue(`fx`).length);
})

jQuery 還提供了一個清理鏈式動畫的功能方法：.clearQueue()。把它放入一個鏈式的回撥函式或.queue()方法裡，就可以把剩下未執行的鏈條給截斷。

//清理後續鏈式呼叫
$(`#box`).slideDown(`slow`, function () {$(this).clearQueue()});

動畫相關方法與全域性屬性

停止動畫
有很多時候，我們需要停止正在執行中的動畫，jQuery中為此提供了一個.stop()方法。
它有三個可選引數：

  1. queue 型別: String 停止鏈式動畫的名稱。（比較少用到，若存在，後兩個引數都是指向該鏈式動畫）

  2. clearQueue型別: Boolean一個布林值，指示是否取消後續的鏈式動畫。預設 false.

  3. jumpToEnd 型別: Boolean一個布林值指示是否當前動畫立即完成。預設false.

說明：

  1. 在無引數，且為鏈式動畫時，呼叫.stop()方法，只是立即停止當前正在進行的動畫，後續動畫繼續執行。

  2. 傳入一個true時，立即停止動畫，並且清空後續所有動畫。

  3. 傳入2個true時，立即停止，並且跳轉到當前動畫的結束位置，後續動畫也不再執行。

程式碼如下：有興趣的自行測試

<button class="start">動畫</button>
<button class="stop">停止</button>
<div style="position: absolute;height: 50px;width: 50px;background-color: #0B71E6;top:30px">12</div>
<script type="text/javascript">
    $(`.start`).click(function () {
        $(`div`).animate({`left` : `300px`}, 1000)
                 .animate({`top` : `300px`}, 1000)
                 .animate({ `width` : `300px`}, 1000)
                 .animate({`height` : `300px`}, 1000);
    });
    $(".stop").click(function() {
        $("div").stop(true,true);
    });
</script>

延遲動畫
有時在執行動畫或鏈式動畫時，需要在運動之前有延遲執行，jQuery 為此提供了.delay()方法。引數為延遲時間，單位為毫秒數。這個方法可以在動畫之前設定延遲，也可 、以在列隊動畫中間加上。直接在上面程式碼任意地方加都可以，比較簡單，自行測試吧。

獲取正在進行的動畫
在選擇器的那篇文章中中，我們提到過一個過濾器:animated，這個過濾器可以判斷出當前運動的動畫是哪個元素。通過這個特點，我們可以避免由於使用者快速在某個元素執行動畫時，由於動畫積累而導致的動畫和使用者的行為不一致。

對上面程式碼進行一些改造,將原div進行復制，新增到其後，給原div新增一個id並且在動畫效果中改為該元素運動

$(`.stop`).click(function(){
    $(`div:animated`).stop().css(`background`, `red`);
        //可以看到只有運動的div背景變色，而未移動的div不改變背景色。
});

動畫全域性屬性
jQuery 提供了兩種全域性設定的屬性，分別為：$.fx.interval，設定每秒執行的幀數；$.fx.off，關閉頁面上所有的動畫。

$.fx.interval 屬性可以調整動畫每秒的執行幀數，預設為 13 毫秒。數字越小越流暢，但可能影響瀏覽器效能。
設定執行幀數為 1000 毫秒：$.fx.interval = 1000;

設定動畫為關閉 true：$.fx.off = true;預設為false

相關文章