Fade Div in using jQuery

Question

I have a container with 3 div's in, when my document is ready id like each element to fade in at different speeds, opacity to go from 0-100 smoothly, is this possible with jquery?

Thanks

Answer 1

HTML:

<div id="divContainer">
    <div style="background-color: Red; display: none;">
        Red
    </div>

    <div style="background-color: Green; display: none;">
        Green
    </div>

    <div style="background-color: Blue; display: none;">
        Blue
    </div>
</div>

jQuery:

$(document).ready(function ()
{
    var count = 1000;

    $("#divContainer > div").each(function()
    {
        $(this).fadeIn(count);
        count += 1000;
    });
}

Answer 2

I made a fiddle for you:

http://jsfiddle.net/6yENB/

Answer 3

jquery

$(document).ready(function(){

   $('#div1').animate({opacity: '0'},'fast');
   $('#div2').animate({opacity: '0'},'slow');
   $('#div3').animate({opacity: '0'},1000);

});

i think is that what you whant to do, animating opacity. sorry for the english im brazilian

note: 'fast' and 'slow' can be changed for any miliseconds you want as example on div #3

cheers

Answer 4

jQuery has built in method for animating the opacity of the element: fadeIn

You can specify the time of fade in in milliseconds as per your requirement.

Select the required container by its id, class or anything as per your markup and call fadeIn method.

$('#div1').fadeIn(500);
$('#div2').fadeIn(1500);
$('#div3').fadeIn(2000);