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

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

是否有一种方法可以在jQuery和Mozilla浏览器中激活css3边界半径属性?

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

我还没有找到一个插件。

-webkit-border-radius

-moz-border-radius

3 个解决方案

#1

I originally expected that something like...

我原以为会有……

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

...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.

…是可行的。但是，我错了:Webkit允许你通过边界半径来设置所有四个角的值，但是不允许你把它读回来——所以上面的代码，动画总是从0开始，而不是10。IE也有同样的问题。火狐会让你读回来，所以一切都按预期运行。

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

嗯…border-radius有一段实现差异的历史。

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.

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

#2

Use cssHooks.

使用cssHooks。

This will help you out:

这将帮助你:

http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/

Links to the cssHooks:

cssHooks链接:

https://github.com/brandonaaron/jquery-cssHooks

Good luck!

好运！

#3

Juste an advice, we can use a function to detect browser's CSS prefix Here a sample code.. http://jsfiddle.net/molokoloco/f6Z3D/

我们可以使用一个函数来检测浏览器的CSS前缀。http://jsfiddle.net/molokoloco/f6Z3D/

#1