When to add the fadeIn method during this dom manipulation using jQuery?

Question

Hi,

Using jQuery, I am referencing a particular ID and then I want to add a message AND use fadeIn to change the color of the background to yellow.

So far I have:

$("#myID").empty().append("<p>Please login</p>").fadeIn("slow");

So would I now be using the CSS method to change the color of the background, fadeIn, then fadeOut to white again?

Answer 1

I assume you want "Please Login" to fade in.

You need to do this.

var login = $("<p>Please login</p>").hide();
$("#myID").empty().append(login).fadeIn();

You need to first set the "Please login" as hidden before you can fadeIn.

Answer 2

Look into .animate() function. Something like:

$("#myID").empty().append(login).animate({background-color: '#123456'}, function() {
   setTimeout(function() { $("#myID").fadeOut('slow'); }, 1500);
});

(( air coded - sorry if it doesn't work ))