jquery - jQuery 动画 css 边界半径属性（webkit、mozilla）

Question

jQuery中有没有办法为Webkit 和 Mozilla 浏览器中可用的 css3边框半径属性设置动画？

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

-webkit-border-radius

-moz-border-radius

Answer 1

我原本期望像...

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

...会工作。但是，我错了：Webkit 允许您通过设置所有四个角的值borderRadius，但不会让您回读它 - 因此使用上面的代码，动画将始终从 0 而不是 10 开始。IE 具有相同的问题。Firefox会让你回读它，所以一切都按预期工作。

嗯......边界半径有某种实现差异的历史。

幸运的是，有一个解决方法：只需单独指定每个角半径：

$("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

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