jQuery animate css border-radiusプロパティ（webkit、mozilla）

Question

jQuery で、WebkitおよびMozillaブラウザで使用可能なcss3 border-radius プロパティをアニメーション化する方法はありますか？

それを行うプラグインが見つかりません。

-webkit-border-radius

-moz-border-radius

Answer 1

当初は次のようなことを期待していました...

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

...動作します。しかし、私は間違っていました。Webkitでは、 borderRadius を使用して4隅すべての値を設定できますが、それを読み返すことはできません。したがって、上記のコードでは、アニメーションは常に10ではなく0から始まります。IEにも同じ問題があります。 Firefoxでは読み返すことができるため、すべてが期待どおりに機能します。

さて... 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/