Question

I cannot get this working correctly, actually at all. What I have so far works but I want to fade in a message and then fade it out. After it has faded out, I want to remove the div completely.

Can someone tell me what I am missing here?

    var div = $('<div>').attr('id', 'error').html('Cannot Be Blank');
    $('body').append(div);

Answer 1

var div = $('<div />').attr('id', 'error')
                      .html('Cannot Be Blank')
                      .hide();
$('body').append(div);
$("#error").fadeIn("slow", function() {
    $(this).fadeOut("slow", function() {
        $(this).remove();
    });    
});

Demo: http://jsfiddle.net/karim79/wpxCk/

To ensure that the fadeout happens after the fadein, it should be triggered within fadeIn’s callback. Similarly, removal of the error div should happen within fadeOut’s callback. See:

• http://api.jquery.com/fadeIn/
• http://api.jquery.com/fadeOut/
• http://api.jquery.com/remove/