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开始borderRadius
拥有同样的问题。 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);
这开始变得非常疯狂; 如果可能的话,我会避免它。
使用cssHooks。
这将帮助你:
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/
链接到cssHooks:
https://github.com/brandonaaron/jquery-cssHooks
祝好运!
Juste一个建议,我们可以使用一个函数来检测浏览器的CSS前缀这里有一个示例代码.. http://jsfiddle.net/molokoloco/f6Z3D/