jQuery 动画 css 边界半径属性（webkit、mozilla）答案

【问题标题】：jQuery animate css border-radius property (webkit, mozilla)jQuery 动画 css 边界半径属性（webkit、mozilla）
【发布时间】：2010-11-03 20:21:44
【问题描述】：

jQuery 中是否有办法为 Webkit 和 Mozilla 浏览器中可用的 css3 border-radius 属性设置动画？

我还没有找到可以做到这一点的插件。

-webkit-border-radius

-moz-border-radius

【问题讨论】：

标签： jquery jquery-animate border css

【解决方案1】：

我原本以为是……

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

...会起作用的。但是，我错了：Webkit 允许您通过borderRadius设置所有四个角的值，但不会让您读回它 - 因此使用上面的代码，动画将始终启动在 0 而不是 10。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);

不过，这开始变得非常疯狂；如果可能，我会避免它。

【讨论】：

嗯，有点。到目前为止，如果在样式表中设置了任何半径，角将对齐正方形，然后从那里动画到 30（使用您的示例）。它似乎想从 0 变为给定的任何值。我在 Safari 和 Firefox 3.5 beta 中得到了相同的结果。
更正：它似乎在 Firefox 中正常工作。 Safari 只想增加。
看起来无论我往哪个方向走，Safari 总是从捕捉到 0 开始。任何解决方法的想法？谢谢。
@patrick：是的，我找到了解决方法。无法在 Safari 中测试，但可以在 Chrome 中工作（它表现出相同的错误，所以我认为这是一个通用的 Webkit 东西）。我已经更新了答案，试试看...
这段代码对我不起作用，firefox 5，jquery 1.5，我改变了这种情况 - BorderRadius 到 borderRadius ，自始至终都有效

【解决方案2】：

使用 cssHooks。

这将帮助你：

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

cssHooks 的链接：

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

祝你好运！

【讨论】：

【解决方案3】：

只是一个建议，我们可以使用一个函数来检测浏览器的 CSS 前缀这是一个示例代码..http://jsfiddle.net/molokoloco/f6Z3D/

【讨论】：