jQuery动画CSS边框半径属性（Webkit，Mozilla）

Question

jQuery动画CSS边框半径属性（Webkit，Mozilla）

30

在 jQuery 中是否有一种方法可以动画化 Webkit 和 Mozilla 浏览器中可用的 CSS3 border-radius 属性？

我没有找到一个可以做到这点的插件。

-webkit-border-radius

-moz-border-radius

- user113716

3个回答

3

使用cssHooks。

这会帮助你：

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

链接到cssHooks：

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

祝你好运！

- Bas Dirks

2

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

- molokoloco

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shog9 · Accepted Answer

我最初的想法是，像这样做些什么...

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

我本以为设置borderRadius值对所有四个角落都有用，但事实证明，这种方式在Webkit和IE上无法读取回来。所以使用以上代码时，动画始终会从0开始而不是10。幸运的是，Firefox可以成功读取回来，因此在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);

不过，这开始变得相当疯狂了；如果可能的话，我会避免使用它。