Question

I’ve got a hopefully simple problem. I’ve got a function that I give a user message, it displays the message in a predefined div. However, if another message comes along too quickly it changes the message, but then fades out and back in again.

This is where I am right now;-

function readUserMessage(message) {

    if($('#userMessage').is(':visible')) {
        $('#userMessage').fadeOut(200).html("<span style=\"\">" + message + "</span>").fadeIn(300).delay(3000).fadeOut(300);
    } else {
         $('#userMessage').html("<span style=\"\">" + message + "</span>").fadeIn(300).delay(3000).fadeOut(300);
    }

}

Any help really appreciated.

Answer 1

.html() is not automatically added to jQuerys fx queue so it won’t “wait” until your animation stuff has finished. You can workaround that by manually adding a queue entry, like

$('#userMessage').fadeOut(200).queue(function(next) {
     $(this).html("<span style=\"\">" + message + "</span>");
     next();
}).fadeIn(300).delay(3000).fadeOut(300);

Reference: .queue()