jQuery的動畫CSS邊界半徑財產（的WebKit，Mozilla的）

Question

是否有jQuery的的方式來製作動畫在WebKit和Mozilla瀏覽器提供的CSS3 邊界半徑財產？

我還沒有找到一個插件可以做到這一點。

-webkit-border-radius 

-moz-border-radius 

Answer 1

我原本預計類似...

$("selector") 
    .css({borderRadius: 10}); 
    .animate({borderRadius: 30}, 900); 

...會工作。但是，我錯了：Webkit允許您通過borderRadius設置所有四個角的值，但不會讓您讀回它 - 所以對於上面的代碼，動畫將始終從0開始，而不是從10開始。IE有同樣的問題。火狐將讓你讀回來，所以一切都如預期那樣。

呃... border-radius有一些實現差異的歷史。

幸運的是，有一個變通辦法：只需分別指定每個角半徑：

$("selector") 
    .css({ 
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10 }) 
    .animate({ 
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30}, 900); 

需要注意的是，如果你想保持與舊的瀏覽器兼容，你可以全力以赴，並用舊的瀏覽器的前綴名稱：

$("selector") 
    .css({ 
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10, 
    WebkitBorderTopLeftRadius: 10, 
    WebkitBorderTopRightRadius: 10, 
    WebkitBorderBottomLeftRadius: 10, 
    WebkitBorderBottomRightRadius: 10, 
    MozBorderRadius: 10 
    }) 
    .animate({ 
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30, 
    WebkitBorderTopLeftRadius: 30, 
    WebkitBorderTopRightRadius: 30, 
    WebkitBorderBottomLeftRadius: 30, 
    WebkitBorderBottomRightRadius: 30, 
    MozBorderRadius: 30 
    }, 900); 

雖然這開始變得非常瘋狂;如果可能，我會避免它。

Answer 2

使用cssHooks。

這將幫助你：

http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/

鏈接到cssHooks：

https://github.com/brandonaaron/jquery-cssHooks

祝你好運！

Answer 3

中庸之道的建議，我們可以使用一個功能到瀏覽器的CSS前綴 這裏的樣本代碼.. http://jsfiddle.net/molokoloco/f6Z3D/