JQuery UI如何製作顏色動畫

工具/材料

Sublime Text

操作方法

先打開Sublime Text，然後在編輯器中添加HTML5頁面，如下圖所示，由於頁面中中文，所以編碼需要設置成utf-8的格式

接下來需要下載Jquery UI的庫文件，並且在HTML中導入Jquery UI的樣式庫文件，如下圖所示

由於顏色動畫特效需要JS腳本控制，所以需要導入Jquery的腳本和Jquery ui的腳本，如下圖所示。因為Jquery ui是用jquery編寫的，所以先導入Jquery文件

然後在body標籤中添加一個div和一個按鈕。Div標籤是我們要操作的顏色塊，按鈕用來觸發動畫操作，如下圖所示

接下來在頁面中添加style標籤，併為上面設置的div顏色塊來添加樣式，如下圖所示

然後在script標籤中添加我們腳本代碼，如下圖所示，通過調用animate方法進行動畫調用，它可以直接指定顏色塊的背景顏色

最後，我們運行頁面程序，你會在頁面中看到一個顏色塊和一個按鈕，點擊按鈕以後，顏色塊發生變化了，如下圖所示