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

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>