jQuery: 動畫佇列與停止動畫 stop

JethroLiu_發表於2020-12-05




1. 動畫佇列


在一個元素上執行多個動畫,這些動畫不會同時執行,而是放入到一個佇列中依次執行,這個佇列叫做動畫佇列。

當佇列中前一個動畫執行完成後,佇列中的下一個動畫才開始執行,直到整個動畫佇列執行結束。



2. 停止動畫


stop 函式用於立即停止當前動畫。

第一個引數為停止動畫時,是否清除整個動畫佇列。

為 true 時代表清除動畫佇列,當前動畫停止後,任務佇列中的所有動畫都不再執行。

為 false 時不清除動畫佇列,當前動畫停止後,繼續執行動畫佇列的其他動畫。

第二個引數為停止動畫時,是否跳轉到最終效果。

為 true 時代表當前動畫停止後,立即得到當前動畫完全執行結束時的狀態。

為 false 時代表當前動畫停止後,得到停止時刻的狀態。

兩個引數的預設值都是 false。

<style>
    #jack {
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
    }
</style>

<div id="jack"></div>
<button>停止動畫</button>
<script>
    $("#jack").slideDown(3000).slideUp(3000).show(2000).hide(2000);
    $("button").click(function () {
        $("#jack").stop(true, true);
        // $("#jack").stop(true, false);
        // $("#jack").stop(false, true);
        // $("#jack").stop(false, false);
    });
</script>

相關文章