jQuery fadeOut（）一度だけ動作します

Question

jQueryを使用して私が作成した「通知」バブルをフェードアウトしています。初めて関数が呼び出されたときはうまくフェードアウトされますが、2回目には "通知"がボディに追加されますが、そこに座ってフェードアウトしません。どんな助けでも大歓迎です。

ここには、呼び出されているJavascriptがあります。

if (pointsCalculated = 1) { 
    $('body').append('<div id="progress">' + pointsCalculated + ' point added to current points...</div>'); 
} 
else { 
    $('body').append('<div id="progress">' + pointsCalculated + ' points added to current points...</div>'); 
} 

//Reset calculator after adding to tracker 
calcReset(); 

    $("#progress").fadeOut(2000); 

Answer 1

はフェードアウト後の要素を削除してください：

$("#progress").fadeOut(2000, function() { $(this).remove(); }); 

さらに詳しい情報：

.remove()
.fadeOut()

Answer 2

追加するたびにfadeOutイベントを#progress要素に再バインドする必要があります。

Answer 3

要素をDOMに追加するときに、追加された要素fadeOutバインディングを再作成する必要があります。このバインドは、追加した直後に作成することができます。これで今すぐ動作するはずです。

Answer 4

あなたのコードは、あなたが "進歩" を削除表示されませんので、あなたがしていますおそらく毎回新しいものを追加します。 IDは非常にユニークであるため、コードは2つを見つけて失敗します。

Answer 5

Javascriptでは、IDを持つ要素が複数見つかることはありません。また、再度実行するときには、すでに色あせています。

あなたがクラスにIDを変更して表示され、その項目にfadoutを開始するには、アニメーション、およびその完了したら、あなたは多くの.progress

に持っていけないので、それを削除することができないすべての.progressを見つけることができます

$('body').append('<div class="progress">' + pointsCalculated + ' ' + (pointsCalculated === 1 ? 'point' : 'points') + ' added to current points...</div>'); 

//Reset calculator after adding to tracker 
calcReset(); 

$(".progress:visible:not(:animated)").fadeOut(2000, function() { $(this).remove(); }); 

JavaScriptが、変数が値であるかどうかを調べるには、少なくとも2つの "="を使用する必要があることを覚えておいてください。そうでなければ、その変数に値を設定します。