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方法進行動畫呼叫，它可以直接指定顏色塊的背景顏色

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