Question

In my application I have a script that tells when somebody comes online or goes offline. I put the text of if somebody goes online/offline via content = name+' went offline' or vice versa. I then put that text in a div at the end of my function call: $('#new').text(content);

The problem comes with the fade out, all in all it’s not really working. I’ve been trying to play around with it. Here’s what I have so far:

$('#new').text(content);
$('#new').fadeIn('slow', function() {
        setTimeout($('#new').fadeOut('slow', function() {
        $('#new').css('display', 'none');   
        }));
    });

Answer 1

display:none inside the callback is unnecessary, fadeOut() automatically sets the display to none after concluding.

$('#new').text(content);
$('#new').fadeIn('slow', function() {
    setTimeout("$('#new').fadeOut('slow');", 2000);
});

2000 is the number of miliseconds you’d like to delay it, change it to whatever value suits you better.

As @Pst commented, the function-object may be more consistent even though I personally have more issues with function-objects than code strings.

You may also use the function-object:

$('#new').text(content);
$('#new').fadeIn('slow', function() {
    setTimeout(function(){ $('#new').fadeOut('slow'); }, 2000);
});