.appendTo()
を使って要素のDOM位置を変更したいと考えています。これが完了したら、CSS3で要素をアニメートする必要があります。jQueryを使ってCSS3アニメーションを実行する.appendTo
要素はアニメーション化されず、代わりに新しいCSSスタイルにスナップされます。
はJavaScript:
$(".run").click(function() {
$(".imageOriginal").appendTo(".insert").toggleClass("imageAnimated");
});
HTML:
<div class="insert"> </div>
<img src="img/img1.png" class="imageOriginal"/>
CSS:
.imageOriginal {
-webkit-transform: scale(0.1);
}
.imageAnimated {
-webkit-transition: all 1s ease-in-out;
-webkit-transform: scale(1);
}
私は2つの異なるクリックイベントに発射する.appendTo()
と.toggleClass()
方法を分離しました。このメソッドは機能します(しかし、明らかに望ましくない)。私はまた、追加の後に.delay(1000)
を使ってみましたが、これはうまくいきません。
jQueryのUIを提供します.switchClass()関数の説明は次のとおりです。 http://stackoverflow.com/questions/1248542/jquery-animate-with -css-class-without-explicit-styles – Stephen
@Stephen CSS3トランジションを使用するためにjQuery UIを更新しましたか? – Jasper
@Stephen簡単に手作業でコード化できる動作を実装する単一の関数のためだけに(肥大化した、ゴミ)ライブラリを推奨しないでください。 – Bojangles