web-dev-qa-db-ja.com

jQueryアニメーションcss border-radiusプロパティ（webkit、mozilla）

jQueryにcss3 border-radiusプロパティをアニメーション化する方法はありますか？

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

-webkit-border-radius

-moz-border-radius
jqueryjquery-animatebordercss3
30
user113716

私は当初、次のようなものを期待していました...

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

...うまくいくでしょう。しかし、私は間違っていました：WebkitはborderRadiusを介して4つのコーナーすべての値をsetすることを許可していますが、それを読み返すことはできません-上のコードでは、アニメーションIEには同じ問題があります。Firefoxwill読み返して、すべてが期待どおりに機能するようにします。

そうですね... 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);

ただし、これはかなりおかしくなり始めます。なるべく避けたいです。

52
Shog9

CssHooksを使用します。

これはあなたを助けるでしょう：

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

CssHooksへのリンク：

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

幸運を！

3
Bas Dirks

正直なところ、ブラウザのCSSプレフィックスを検出する関数を使用できます。ここではサンプルコードを示します。 http://jsfiddle.net/molokoloco/f6Z3D/

2
molokoloco