jQuery animate css border-radiusプロパティ(webkit、mozilla)
-
06-07-2019 - |
質問
jQuery で、WebkitおよびMozillaブラウザで使用可能なcss3 border-radius プロパティをアニメーション化する方法はありますか?
それを行うプラグインが見つかりません。
-webkit-border-radius
-moz-border-radius
解決
当初は次のようなことを期待していました...
$("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);
しかし、これはかなりおかしくなり始めます。可能な場合は避けます。
他のヒント
cssHooksを使用します。
これはあなたを助けるでしょう:
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/
cssHooksへのリンク:
https://github.com/brandonaaron/jquery-cssHooks
がんばって!
アドバイスをお願いします。ブラウザのCSSプレフィックスを検出する関数を使用できます ここにサンプルコードを示します。 http://jsfiddle.net/molokoloco/f6Z3D/