jQuery fadeOut（）仅可使用一次

Question

I am using jQuery to fade out a "notification" bubble I built. The first time the function is called it fades out just fine, but the second time the "notification" is appended to the body, but just sits there and doesn't fade out. Any help would be greatly appreciated.

Here is the Javascript that is being called.

    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

Try removing the element after the fadeOut:

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

More info:

.remove()
.fadeOut()

Answer 2

Javascript can´t find more then one element with an ID, and its already faded out when you want to run it again.

you can change the id to an class and then find all .progress that is visible and not animated to start the fadout on that item, and when its done you can remove it so you dont have to many .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(); });

remember in javascript if you want to look if a variable is a value you will need to use at least two "=" else you will set the value to that variable.

Answer 3

每次添加后，您都需要将fadeOut事件重新绑定到#progress元素。

Answer 4

You must recreating your appended elements fadeOut binding when you add the element back to the DOM. You can create this binding immediately after the append and this should now work.

Answer 5

You code doesn't show you REMOVING "progress", so you're likely adding a new one each time. Since IDs much be unique, your code finds two and fails.