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具有相同的问题.火狐将让你读它回来,所以一切都按预期出现.

那么...... 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); 

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