CODEWITHSUNDEEP
jqueryjquery-animate
Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

Jquery loop interval

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/

Upvotes: 0

Views: 128

Answers (1)

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

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'
}

Upvotes: 1

Related Questions