fadein fadeout help

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

karim79 · Accepted Answer · 2010-11-26T11:44:33.343

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:

edited Nov 26 '10 at 11:44

answered Nov 26 '10 at 11:37

karim79

339,989
67
413
406

Thanks for the links Karim. I went there before I came here but I didn't understand it. Why is everything a function in JQuery? It's a bit arcane. – Jim Nov 26 '10 at 11:52

score 1 · Answer 2 · answered Nov 26 '10 at 11:42

1

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

answered Nov 26 '10 at 11:42

Vuk

1,225
12
15

Hi Vuk. What exactly is a callback? – Jim Nov 26 '10 at 11:55
It's a reference to an executable piece of code that is passed as an argument to a function that will later on execute it. Some explanation here - http://stackoverflow.com/questions/3616181/callback-function-meaning/3616266#3616266 – Vuk Nov 26 '10 at 12:04
Thank you for the link as well as the explanation. Vuk, can I ask you a question regarding my code please? I have the effects working the way I want them but I can't seem to control where the error div is placed. What must I do to get it where I want it? – Jim Nov 26 '10 at 12:07
Yes, well that's more regarding html/css issues so i'd suggest you open a new question for that matter and give a bit more info about what exactly you want to achieve. – Vuk Nov 26 '10 at 12:12
OK, Vuk, thanks. I'll do that. Again, thanks for all the help. – Jim Nov 26 '10 at 12:13

score 0 · Answer 3 · answered Nov 26 '10 at 11:38

0

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

    $(div).remove();

Add this after your current code :)

answered Nov 26 '10 at 11:38

benhowdle89

36,900
69
202
331

Actually, SO says I can accept after 2 minutes. Your code did work. Who do I give the credit to? You or Karim? – Jim Nov 26 '10 at 11:47
Thanks Ben for the honesty! :) – Jim Nov 26 '10 at 11:51

score 0 · Answer 4 · answered Nov 26 '10 at 11:38

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

fadein fadeout help

4 Answers4