fadein fadeout help

I cannot get this working correctly, actual开发者_StackOverflow中文版ly 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);

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/

So, the jQuery functions you would need are like:

1) .fadeIn( [ duration ], [ callback ] )
2) .fadeOut( [ duration ], [ callback ] )
3) .remove( [ selector ] )

meaning you would nest them in such order, placing them as callbacks.

errordiv = $("#error");
$(errordiv).fadeIn("slow", function(){ 
    $(errordiv).fadeOut("slow", function() {
        $(errordiv).remove();
    })
});

$(div).fadeOut('slow', function() {
    // Animation complete.
});

    $(div).remove();

Add this after your current code :)

You can do it like this:

$('<div>').attr('id', 'error').html('Cannot Be Blank').appendTo('body')
          .hide().fadeIn().fadeOut(function() { $(this).remove(); });

Likely though, you'd want to use a class here for styling...unless it needs an ID, you can leave it off, and in later versions of jQuery, shorten it to:

$('<div>', { html: 'Cannot Be Blank' }).appendTo('body')
  .hide().fadeIn().fadeOut(function() { $(this).remove(); });