jQuery animate css border-radius属性(webkit,mozilla)

在jQuery中有一种方法来动画化Webkit和Mozilla浏览器中可用的css3 border-radius属性?

我没有找到一个插件,它会做到。

-webkit-border-radius

-moz-border-radius
我原本预期的东西像…

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

这开始变得很疯狂,虽然;我会避免它,如果可能的话。

http://stackoverflow.com/questions/1010058/jquery-animate-css-border-radius-property-webkit-mozilla

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:jQuery animate css border-radius属性(webkit,mozilla)