CODEWITHSUNDEEP
javascriptjqueryfadeout
mattdonders
mattdonders

Reputation: 1356

jQuery fadeOut() Only Works Once

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

Upvotes: 2

Views: 2950

Answers (5)

voigtan
voigtan

Reputation: 9031

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.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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.

Upvotes: 0

vdeantoni
vdeantoni

Reputation: 1968

Try removing the element after the fadeOut:

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

More info:

.remove()
.fadeOut()

Upvotes: 4

jjNford
jjNford

Reputation: 5270

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.

Upvotes: 0

Frank van Wijk
Frank van Wijk

Reputation: 3252

You need to rebind the fadeOut event to the #progress element each time it is appended.

Upvotes: 0

Related Questions