jQuery animate css border-radius属性（webkit，mozilla） [英] jQuery animate css border-radius property (webkit, mozilla)

问题描述

在 jQuery 中有没有办法为Webkit和Mozilla浏览器中的css3 border-radius 属性设置动画？

Is there a way in jQuery to animate the css3 border-radius property available in Webkit and Mozilla browsers?

我没有找到可以做到的插件。

I haven't found a plugin that will do it.

-webkit-border-radius

-moz-border-radius

推荐答案

预期会有类似...

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

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

...would work. But, I was wrong: Webkit allows you to set the value for all four corners via borderRadius, but won't let you read it back - so with the code above, the animation will always start at 0 instead of 10. IE has the same problem. Firefox will let you read it back, so everything works as expected there.

好吧... border-radius有一个执行差异的历史。

Well... border-radius has sort of a history of implementation differences.

幸运的是，解决方法：只分别指定每个角半径：

Fortunately, there's a work-around: just specify each corner radius individually:

$("selector")
  .css({
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10 })
  .animate({
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30}, 900);

请注意，如果您希望保持与旧版浏览器的兼容性，旧的浏览器前缀名称：

Note that if you wish to maintain compatibility with older browsers, you can go all-out and use the old browser-prefixed names:

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

这开始变得很疯狂如果可能，我会避免。

This starts to get pretty crazy though; I would avoid it if possible.

这篇关于jQuery animate css border-radius属性（webkit，mozilla）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！