動的に生成された複数のDOM要素をアニメーション化するにはどうすればよいですか?
質問
これは私がどこから来たのかを知るのに役立つかもしれません。 Jqueryは各問題をネストしました
このコードを使用してページにdivs
を追加しています:
jQuery("#list").append(
jQuery("<div>")
.attr("id", "Entry")
.html(html)
);
html
は、テキストとアンカーを含む単なる文字列です。
新しいdivをアニメーション化しようとしています-#Entry
というIDを持つ複数のdivがあります。
ここに私のコードがあります:
jQuery("#Entry").hover(function(){
jQuery(this)
.animate({
width:"50%",
fontSize: "30px",
opacity: 0.3,
borderwidth: "15px"
}, 500);
});
重要な場合、上記は私のjQuery(document).ready(function(){ }
関数にあります。
解決
まず、そのIDで複数の<div>
を追加している場合、間違っています。 id
属性は、ドキュメント内で一意である必要があります。同じlive
を持つ複数の要素があると、Javascriptが混乱する可能性があります。同じ社会保障番号を持つ2人に相当します。 :)要素のグループに関する一般的でベストプラクティスは、すべての要素にクラスを与え、そのように選択することです。
これまでは、 mouseover
関数を調べてください。欲しいです。基本的に、準備ができたドキュメントでコードを実行すると、ドキュメントの現在の状態に対してコードが実行されます。つまり、その時点で存在する(提供されたセレクターに一致する)要素のみが、提供されたイベントにバインドされます。 mouseout
関数は、これを回避する方法として作成されました。別の解決策は、新しいhover
を追加した後にバインディングコードを再度実行することですが、必要な<=>および<=>イベントをサポートする<=>を使用するほどクリーンではありません<=>を実行します。
他のヒント
live()は、最新のjQueryのカスタムイベントを含むすべてのイベントをサポートします...