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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sunu340Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GregArnottCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.