5

私はjqueryアニメーションを作成していますが、奇妙なことに、新しい段落を追加すると、それが2回追加されます。問題は、前の2つの段落が追加された場合にのみ発生します.おそらくそれはjQueryのバグです..そうでなければ、誰かが私を助けてくれることを願っています.

HTML:

<body>
    <div id="element">
     </div>
</body>​

JavaScript: 

$(function() {
    animation();
});

function animation()
{
   $('<p id="p1">paragraph 1</p>').appendTo('#element');
   $('<p id="p2">paragraph 2</p>').appendTo('#element');
   $('#p1, #p2').fadeOut(600, function(){
       $('#p1, #p2').remove();
       var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
   });
}​

問題は、2回追加された「段落3」にあります！ここでコードを実行できます: http://jsfiddle.net/jonah13/QLM2s/

ありがとう、ユネス

4

5 に答える 5

6

問題を特定した他の回答が反対票を投じられた理由はわかりません。

これを修正するコードは次のとおりです。jQuery docsから、jQuery 1.6 (jsFiddle が 1.7.2 を使用していたので使用していると思います) の時点で使用できることに注意して.promise()ください。

jQuery 1.6 では、この.promise()メソッドを メソッドと組み合わせて使用​​して、deferred.done()一致するすべての要素がアニメーションを完了したときに、アニメーション全体に対して単一のコールバックを実行できます。

私はあなたのフィドルを更新しました：

$(function() {
   animation();
});

function animation()
{
   $('<p id="p1">paragraph 1</p>').appendTo('#element');
   $('<p id="p2">paragraph 2</p>').appendTo('#element');
   $('#p1, #p2')
     .fadeOut(600)
     .promise().done(function() {
       $('#p1, #p2').remove();
       var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
   });         
}​
于 2012-05-07T07:31:05.600 に答える
5

に提供される関数はfadeOut()、セレクターに一致する要素ごとに1回起動されます。セレクターは2つの要素を返すため、2回起動され、2つの段落が追加されます。

ここで変更された例：http：//jsfiddle.net/QLM2s/1/

于 2012-05-07T07:20:57.027 に答える
2

問題は、段落1と2をフェードアウトする場合です。jQueryは、指定したすべてのセレクターに対してフェードアウト関数内のコードを実行しています（この場合、2つの段落なので2つ追加します）。

于 2012-05-07T07:21:46.400 に答える
1

フェードアウト（）は2倍うまく起動しているので、divに追加する前に段落を空にします。

以下のコードを試してください：

$(function() {
 animation();
});
function animation() 
{
 $('<p id="p1">paragraph 1</p>').appendTo('#element');
 $('<p id="p2">paragraph 2</p>').appendTo('#element');
 $('#p1, #p2').fadeOut(600, function(){      
      $('p').empty();
   var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
 });
}
于 2014-09-22T20:18:07.160 に答える
-1

これはうまくいくようです

$(function() {
   animation();
});

function animation()
{
   $('<p id="p1">paragraph 1</p>').appendTo('#element');
   $('<p id="p2">paragraph 2</p>').appendTo('#element');
   $('#p1').fadeOut(600, function(){
       $('#p1').fadeOut();
      $('#p1, #p2').remove();
      var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
   }

）; } </ p>

于 2012-05-07T07:23:30.863 に答える