混淆jQuery中的動畫功能

Question

假設我有我的頁面框：

<div id="test" style="width:200px; height:200px; background:yellow"> 
     this is a test 
    </div> 

我只是包括「jQuery的1.6.2.min.js」在我的網頁

那麼我想更改字體大小，所以我用

$('#test').animate({ fontSize: "10em"}, "slow"); 

然後我想改變「測試」框 的background-color我寫：

$('#test').animate({ 'background-color': '#000000' }, "slow"); 

但直到我包括「jquery-ui-1.8.5.custom.min.js」它不起作用。

我認爲原單「jQuery的1.6.2.min.js」文件已經包括所有的動畫功能， 字號和背景顏色都CSS屬性，但原來只能支持 字體大小變化？爲什麼？

我的問題是，我認爲包「jquery-ui-1.8.5.custom.min.js」只是用於UI或其他一些東西 。兩者都用於改變CSS屬性。

Answer 1

閱讀jQuery的文檔爲.animate：

所有動畫處理的屬性應該被動畫化以單一數值， 除了下面提到;大多數非數字屬性不能使用基本jQuery功能動畫 。 （例如，寬度， 高度或左側可以是動畫，但背景顏色不可以）。

除非指定了其他 ，否則屬性值將被視爲像素數。可以指定單位em和％。

如果要動畫像background-color屬性，你將不得不使用jQuery UI（或其他插件）因爲你已經注意到了。請注意，jQuery UI站點提供了一個自定義的下載功能，所以如果你不想包含所有的小部件，你可以只選擇核心庫。

Answer 2

jQuery本身不支持顏色動畫。 jQuery UI的確如此。曾經有一個單獨的顏色插件，但似乎已被吸收到UI現在。

編輯：這裏是原來的插件，雖然，你可以得到它的工作沒有用戶界面：http://plugins.jquery.com/files/jquery.color.js.txt