jquery animate css border radius属性(webkit、mozilla)

我原本以为…

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

……会起作用的。但是,我错了:webkit允许你 设置 所有四个角的值通过 borderRadius ,但不会让您读回-因此,使用上面的代码,动画将始终从0开始,而不是从10开始。我也有同样的问题。火狐 将 让你把它读回去,这样一切都能按预期工作。

好。。。边界半径有一段实现差异的历史。

幸运的是,有一个解决方法:只需分别指定每个角半径:

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

不过,这开始变得相当疯狂;如果可能的话,我会避免的。

使用CsSookes。

这将帮助您:

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

指向csshooks的链接:

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

祝你好运!

只是一个建议,我们可以使用一个函数来检测浏览器的css前缀 这里是一个示例代码。 http://jsfiddle.net/molokoloco/f6Z3D/