How to fade in/out an HTML DIV container using JavaScript?

Question

I have an DIV container with an id="myDiv" attribute+value. I'd like to fade this in/out smoothly.

Would I have to create some sort of run loop with an timer and then modify the opacity value of the DIV?

Is jQuery perfect for this kind of stuff?

Answer 1

jQuery is perfect.

$('#myDiv').fadeOut();

http://api.jquery.com/fadeOut/

http://api.jquery.com/fadeIn/

Answer 2

The jQuery has fadeIn and fadeOut methods to create the fading effect. You can for example use them like this on your div:

$('#myDiv').fadeOut('slow');

Or you can also use the animate method and specify the opacity option to it to create the fading effect.

Not to forget about the fadeTo method too :)