jquery - 如何使用jQuery设置border-top-right-radius的水平和垂直半径的动画

是否可以对此进行动画处理：

border-radius: 0 0 120px 120px / 0 0 90px 90px;

对此：

border-radius: 120px 120px 0px 0px / 90px 90px 0px 0px;

使用jQuery吗？

我已经尝试了以下方法，但无法使其正常工作：

$('div.smile').animate({
    borderTopLeftRadius: "120px 90px",
    borderTopRightRadius: "120px 90px",
    borderBottomLeftRadius: "0px",
    borderBottomRightRadius: "0px"
});

我意识到这是因为我一次只能设置一个属性值的动画...是否可以通过某种方式将borderTopLeftRadius分解为两个半径分量，例如borderTopLeftRadiusHorizontal和borderTopLeftRadiusVertical？

我将接受使用纯jQuery或jQuery插件作为正确答案的方法。

看到：
http://jsfiddle.net/adamtsiopani/9pASU/19/

非常感谢！ :)

更新资料

我认为了解最终结果的背景非常重要……我希望能够根据其他事件来动态更改动画的长度/持续时间-最好是在动画中期时即，我希望能够在动画发生之前，之后或之时加快，减慢或停止动画。我不确定这是否可行，或者我在做梦，但是如果有人可以分享他们的经验，我将不胜感激！ :)

最佳答案

您可以使用css3和过渡：
动画自：

div.smile {
    /* your codes */
    border-radius: 0 0 120px 120px / 0 0 90px 90px;
    -webkit-transition: 2s all;
    -moz-transition: 2s all;
}

至：

div.smile.animated {
    border-radius: 120px 120px 0px 0px / 90px 90px 0px 0px;
}

js：

$this.find('div.smile').addClass('animated');

see this