jQuery 动画 css 边框半径属性（webkit，mozilla）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1010058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate css border-radius property (webkit, mozilla)
提问by user113716
Is there a way in jQueryto animate the css3 border-radiusproperty available in Webkit and Mozilla browsers?
jQuery 中有没有办法为Webkit 和 Mozilla 浏览器中可用的 css3 border-radius属性设置动画？
I haven't found a plugin that will do it.
我还没有找到可以做到这一点的插件。
-webkit-border-radius
-moz-border-radius
回答by Shog9
I originally expected that something like...
我原本以为是这样的……
$("selector")
.css({borderRadius: 10});
.animate({borderRadius: 30}, 900);
...would work. But, I was wrong: Webkit allows you to setthe 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 willlet you read it back, so everything works as expected there.
...会工作。但是，我错了：Webkit 允许您通过设置所有四个角的值borderRadius，但不会让您读回它 - 因此使用上面的代码，动画将始终从 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.
不过，这开始变得非常疯狂；如果可能的话，我会避免它。
回答by Bas Dirks
Use cssHooks.
使用 cssHook。
This will help you out:
这将帮助您：
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/
Links to the cssHooks:
cssHooks 的链接：
https://github.com/brandonaaron/jquery-cssHooks
https://github.com/brandonaaron/jquery-cssHooks
Good luck!
祝你好运！
回答by molokoloco
Juste an advice, we can use a function to detect browser's CSS prefix Here a sample code.. http://jsfiddle.net/molokoloco/f6Z3D/
Juste 一个建议，我们可以使用一个函数来检测浏览器的 CSS 前缀 这里是一个示例代码.. http://jsfiddle.net/molokoloco/f6Z3D/
