Animation would like to fire off multiple squares

Hi,

on this page it the starts out by placing images using a bit of animation, what I would like to do is send them simutanusly say start another when the previous is half way, can anyone suggest a way of doing this?

Here is the present source:

$(function(){
    var t = [1,3,6,8,14,25,17,20,28,38,31,23]
    
    loopy();    
    
    function loopy(place){
        if(typeof(place) == 'undefined' ){
            place = 1;
        } 
        window.setTimeout(function() {
            $('#launchpad').empty();
            var end = $('div#pic'+t[place-1]);
            var image = end.clone().attr({
                width:0,
                height:0,
                'id':'star'
            });
            var post =end.offset(); 
            var pos =end.position(); 
            var tp = (post.top-157)+42;
            var lt = (pos.left-5)+42;
            $('#launchpad').append(image);   
            $("#star")
            .animate({
                opacity:0.1,
                top:tp,
                left:lt,
                width:'42px',
                height:'42px'
            },Math.sqrt(Math.pow(pos.top,2) + Math.pow(pos.left,2))*2)
            .hide('slow',function(){
                end.css('visibility','visible') 
                loopy(place+1)
            }) 
        },100)
    }       
});

Open in new window


Darren
LVL 13
darren-w-Asked:
Who is Participating?
 
sunu340Connect With a Mentor Commented:
Try this : Using setInteval instead of setTimeout and loopy()...

$(function(){
    var t = [1,3,6,8,14,25,17,20,28,38,31,23];
   
var place =1;
        window.setInterval(function() {
            $('#launchpad').empty();
            var end = $('div#pic'+t[place-1]);
            var image = end.clone().attr({
                width:0,
                height:0,
                'id':'star'
            });
            var post =end.offset();
            var pos =end.position();
            var tp = (post.top-157)+42;
            var lt = (pos.left-5)+42;
            $('#launchpad').append(image);  
            $("#star")
            .animate({
                opacity:0.1,
                top:tp,
                left:lt,
                width:'42px',
                height:'42px'
            },Math.sqrt(Math.pow(pos.top,2) + Math.pow(pos.left,2))*2)
            .hide('slow',function(){
                end.css('visibility','visible');
               
            });
            place = place+1;
        },300);
           
});

U can put ur desired value in place of 300 to get desired speed.
0
 
GregArnottConnect With a Mentor Commented:
Pull the destination and animation code out of the Timeout and into its own separate function.

Replace the code with a call to grab from a second array.
Else an array of all the positions you have, then drop the position number from the array as it's used. Use a limit of iterations for how many images you wish to show.

Main Timeout then is calling this number and firing off the (now) common function for animation and placement.
Have second (and how many others you wish) called half the time after the first it.

Ultimately you can rearrange the whole thing where the variables are set once, the calls are sequenced in turn for placement and the timeouts are chained.

ie: http://benalman.com/projects/jquery-dotimeout-plugin/
0
 
darren-w-Author Commented:
Thanks, not finished this yet so may come back to it a later date, but will close to clear
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.