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()