jq動畫stop如何實現

新建一個html文件，定名為test.html，用于講解stop若何實現遏制動畫。同時，在test.html中加載jquery.min.js

在test.html利用div和CSS建立一個動畫的原始結構，一個大正方形包含一個小正方形。

編寫一個moveX()函數，實現小正方形在大正方形里面從左移動到右邊，再從右邊移動到左邊的動畫結果。代碼如下：

在test.html頁面建立三個input按鈕，并給每個按鈕設置一個id屬性，用于下面利用stop實現節制動畫的結果。

第一個按鈕“遏制當前動畫”，當按鈕被點擊時，遏制當前動畫，沿原路返回起點，若是返回過程中再點擊，會暫停在路中。這是stop（）方式不帶參數時實現遏制動畫的結果。代碼如下：

第二個按鈕“遏制所有動畫”，當按鈕被點擊時，遏制所有動畫，移動過程中點擊遏制會直接達到終點，若是返回過程中再點擊，會暫停在路中。這是stop（true）方式帶參數時實現遏制動畫的結果。代碼如下：

第三個按鈕“遏制所有動畫，達到終點”，當按鈕被點擊時，遏制所有動畫，移動的過程中點擊遏制會直接達到終點，若是返回過程中再點擊，會遏制在起點。這是stop（true,true）方式帶兩個參數時實現遏制動畫的結果。代碼如下：

以上就是stop（）方式在動畫中實現遏制動畫結果的過程，在利用其操作動畫時，必然要考慮是否需要帶參數操作動畫。

0 條評論