jQuery 动画 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设置所有四个角的值，但不会让您读回它 - 所以对于上面的代码，animation 将始终从 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);

请注意，如果您希望保持与旧版浏览器的兼容性，您可以全部使用 go 并使用旧版浏览器前缀名称：

$("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_inte.net_explorer_support/

链接到 cssHooks：

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

祝你好运！

Answer 3

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