Question

I’m very new to the scripting and jQuery in particular, and even though i thoroughly tried to find an answer to my question, i didn’t quite get it.

I’m building a non-flash animation intro for the site.
Here’s the code (a part of it… but the rest works just like this) of the animated parts.
What i need is to figure out how to loop this animation after it’s done, without refreshing the page. Please, help!

<script type="text/javascript">

$(document).ready(function() {
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true});
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true});

    //this list goes on, but i figured this is enough for example purposes


});


$(function() {
    $("#enter").delay(2000).animate({opacity:1.0}, { duration: 2000, queue: true });

    $("#enter").hover(highlight, highlight);
           });

function highlight (evt) {
    $("#enter").toggleClass("highlighted");
    }

</script>

The parts that i need to animate on loop are $pic0 through #pic0-g…. I would hugely appreciate if someone could give me a tip. I tried to find a way to combine all the animations in one function, but has problems combining different selectors AND different actions.

Answer 1

I would put all the animations in a function and then call it when the last animation is complete (notice that the same thing is done in the jQuery documentation for .queue()).
This can be done like this:

function animateThings() {
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true});
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true})
    //more animations
    $('selector-for-last-animation').delay(something).animate({name: value}, {duration: something, queue: true, complete: animateThings});
}
animateThings();