jQuery动画CSS边框半径属性（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);

但是，这开始变得非常疯狂。如果可能，我会避免这样做。