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 设置所有四个角的值，但不会让你读回来 - 所以使用上面的代码，动画将始终从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); 

这开始变得非常疯狂;如果可能的话我会避免它。

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

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