Question

I am looking for a simple bit of jquery that will load images in sequence.

So, I’m using the Document ready function, to ‘trigger’ it, however can’t come up with how to ‘.fadein()’ images one by one, in a gallery.

So, when the DOM is ready, IMG[1] will fade in, then, once this is done, IMG[2] will begin to fade in. If that makes sense.

I have tryed to use the ‘.queue()’ function, but I simply can not use it in this instance.

I am open to any suggestions for different ideas (not jquery) 🙂

Thanks

-Jim

Answer 1

try this:

    <script type="text/javascript">
    $(function() {
        $("img").hide();
        $("#1").fadeIn('slow', function() {
            $("#2").fadeIn('slow', function() {
                $("#3").fadeIn('slow', function() {
                    $("#4").fadeIn('slow', function() {
                        $("#5").fadeIn('slow');
                    });
                });
            });
        });
    });
</script>

html:

    <div>
    <img src="img.jpg" id="1" />
    <img src="img.jpg" id="2" />
    <img src="img.jpg" id="3" />
    <img src="img.jpg" id="4" />
    <img src="img.jpg" id="5" />
</div>