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"
});

これは、一度に1つのプロパティ値しかアニメートできないためです...となどborderTopLeftRadiusの2つの半径コンポーネントに分解できる方法は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 に答える