jq動畫stop如何實現

2019-12-12 14:28:21

在jquery中，stop()常用於停止動畫，給stop不同的引數，停止的效果不同。下面介紹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（）方法在動畫中實現停止動畫效果的過程，在使用其操作動畫時，一定要考慮是否需要帶引數操作動畫。