Question

I want to show a div and remove it after few seconds. It’s just that easy.
So in my html I’ve got: <div id="msg"></div>

And I’ve got this function:

function showWarning(text) {
            $('<div>'+text+'</div>').appendTo('#msg').hide().fadeIn('fast').delay(1000).queue(function() {
                $(this).fadeOut();
        });
    }

I can’t find any way to make this work. fadeOut() is called but nothing happens on screen.
If I change fadeOut() to hide() it works fine. However… If I try hide(500) then it won’t work.

I assume this is something trivial – beginner mistake – but I can’t find it.

Thanks

Answer 1

The fadeIn() must not be finished running, use a callback function instead before doing your fadeOut.

$('<div>'+text+'</div>').appendTo('#msg').hide().fadeIn('fast', function () {
    $(this).fadeOut();
});