Pris0n
Pris0n

Reputation: 350

Jquery Animation on div, remove after that

I create several divs with the id error_count dynamically. After the animation below i want them to be removed again. The current problem is, that some divs that are created later than others, disappear earlier than they should.

var timer = [];
$("#"+error_count).fadeIn().delay(1500).fadeOut();
timer[error_count] = setTimeout(function(){
    $("#"+error_count).remove(); 
}, 2000);

Upvotes: 0

Views: 59

Answers (3)

George
George

Reputation: 36794

The second parameter in the fadeOut() (and fadeIn(), for that matter) method is a callback; a function to call when the fade out has finished:

$("#"+error_count).fadeIn().delay(1500).fadeOut(200, function(){
    $(this).remove();
});

Upvotes: 3

Mykyta Shyrin
Mykyta Shyrin

Reputation: 322

Try this:

$.when (
    $("#"+error_count).fadeIn().delay(1500).fadeOut();
).done (
    $("#"+error_count).remove();
);

Upvotes: 1

Matthew
Matthew

Reputation: 25773

Put a callback on the fadeOut method that will delete the element after the fadeOut completes.

$("#" + error_count).fadeIn().delay(1500).fadeOut(400, function(){
    $(this).remove();
});

Upvotes: 2

Related Questions