jQuery的動畫邊框沒有似乎工作

Question

jQuery的動畫界似乎並不在此代碼很好地工作： http://jsbin.com/ewuyup/13/edit

沒有人有任何想法解決它？

我在Animate的jQuery網站上看到了這個。

不完全支持簡寫CSS屬性（例如字體，背景，邊框）。例如，如果要爲呈現的邊框寬度設置動畫效果，則必須提前設置至少一個除「auto」之外的邊框樣式和邊框寬度。或者，如果你想動畫字體大小，你可以使用fontSize或CSS等價的'font-size'而不是簡單的'font'。

希望有人能幫助我。

Answer 1

我設法做到這一點：設置邊框樣式和顏色的CSS，並把borderWidth:"2px",在你生命的這樣：

http://jsbin.com/ewuyup/20/

Answer 2

你不能動畫顏色和樣式的邊框（有然而，有插件動畫顏色），所以你會設置一個零寬度和合適的款式和顏色，然後再使用動畫寬度"border-width"代替"border"：

例子：

$(".message_box_red").css({ 
    "border": "0px solid blue" 
}).animate({ 
    "border-width":"5px", 
    "margin":"1px", 
    "padding":"7px", 
    "width":" 409px", 
    "height":"20px" 
},2000,function()