Jquery loop interval

Question

I have a series of animation co-ordinates stacked inside a loop. I want to run ALL co-ordinates over a certain period and when it finishes going through all it must start from the top and run through them again.

The loop works, but it doesn't start from the first co-ordinates ('top':'+=50' and 'left':'+=300') when it goes through the loop.

var port = $('span.view-port'),
    yoyoDuration = 100,
    run = setInterval( function (){
            port.animate({
            'top': '+=50',
            'left': '+=300'
            }, {duration: 1500}) /* -- first co-ordinates -- */
            .animate({
            'top': '+=80',
            'left': '-=300'
            }, {duration: 1500})
            .animate({
            'left': '+=300',
            }, {duration: 2500})
            .animate({
            'top': '-=80',
            'left': '-=300'
            }, {duration: 2500})
            .animate({
            'top': '+=150',
            'left': '+=300'
            }, {duration: 2500})
            .animate({
            'top': '+=50',
            'left': '-=300'
            }, {duration: 2500}) /* -- last co-ordinates -- */
    }, 500);

    setTimeout(function () {
    }, yoyoDuration);

DEMO: http://jsfiddle.net/simomultimedia/NXSVk/1/

If your last animation doesn't put the object back where you want the loop to start again, then you will have to either add a new last step to your animation that puts it back in the right place or just set it back into the right place with .css(). Since you're using += and -=, those are relative to the current location. So, to make the current location what you want at the start of each iteration, you have to make the numbers do that. — jfriend00
– jfriend00, Commented Feb 11, 2013 at 7:24
ahh now I see, I was focusing on the loop whereas the the solution is on the last animation. Thanks man! — Simo Mafuxwana
– Simo Mafuxwana, Commented Feb 11, 2013 at 8:24

Jehanzeb.Malik · Accepted Answer · 2013-02-11 08:16:55Z

1

There seems to be a mathematical error. If you want your last animate to move the element to the start position, change it to:

.animate({
    'top': '-=200',
    'left': '-=300'
}

But if you want it to move to start after you current last animation then add the following animate after that:

.animate({
    'top': '-=250'
}

answered Feb 11, 2013 at 8:16

Jehanzeb.Malik

3,3904 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery loop interval

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related