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 设置所有四个 Angular 的值，但不会让您读回它 - 所以对于上面的代码，动画总是从 0 而不是 10 开始。IE 有同样的问题。 Firefox 将让您读回它，因此那里的一切都按预期工作。

嗯... border-radius 有一些实现差异的历史。

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

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

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