0

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

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/

非常感谢！:)

更新

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

4

1 回答 1

0

您可以使用 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');

看到这个

于 2012-11-23T05:29:03.030 回答