jQuery 中是否有办法为Webkit和Mozilla浏览器中提供的css3 border-radius 属性设置动画?
我还没有找到能够做到这一点的插件。
-webkit-border-radius
-moz-border-radius
答案 0 :(得分:52)
我原本期望像......这样的东西。
$("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);
这开始变得非常疯狂;如果可能的话我会避免它。
答案 1 :(得分:3)
使用cssHooks。
这会帮助你:
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/
指向cssHooks的链接:
祝你好运!答案 2 :(得分:2)
Juste建议,我们可以使用一个函数来检测浏览器的CSS前缀 这是一个示例代码.. http://jsfiddle.net/molokoloco/f6Z3D/