CODEWITHSUNDEEP
jqueryloopsjquery-animate
Eduardo Gustavo Salazar
Eduardo Gustavo Salazar

Reputation: 71

How to loop a jQuery div animation?

I’m trying to implement a jQuery function with an infinite loop to animate a div. I can’t figure out how to do it. This is my code:

$(document).ready(function () {
    $('#divers').animate({
        'margin-top': '90px'
    }, 6000).animate({
        'margin-top': '40px'
    }, 6000);
});

Upvotes: 6

Views: 25078

Answers (6)

madlee
madlee

Reputation: 647

put the code that does the full animation into a function, then pass that function as the callback param to the last animation. Something like...

$(document).ready(function() {   
    function animateDivers() {
        $('#divers').animate(
            {'margin-top':'90px'}
            ,6000
        )
        .animate(
            {'margin-top':'40px'}
            ,6000
            ,animateDivers //callback the function, to restart animation cycle
        ); 
    }

    animateDivers(); //call, to start the animation
});

Upvotes: 9

eyal_katz
eyal_katz

Reputation: 1131

Using setInterval is the way to go. Too much recursion will just get you "Stack Overflow" :-) "Uncaught RangeError: Maximum call stack size exceeded"

Upvotes: 2

JJschk
JJschk

Reputation: 431

You can also set the set interval function specifying which method to call at what interval

$(function () { setInterval(fnName, 6000); });

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

use the .animate() callback to 'recall' your function:

jsBin demo

$(function() {
  
  
  function loop(){
   $('#divers')
     .animate({marginTop:90},6000)
     .animate({marginTop:40},6000, loop); // callback
  }
  
  loop(); // call this wherever you want


});

Upvotes: 2

adeneo
adeneo

Reputation: 318222

$(document).ready(function() {
    function ani() {
        $('#divers').animate({
               'margin-top':'90px'
            },6000).animate({
               'margin-top':'40px'
           },6000, ani); //call the function again in the callback
        }); 
    }); 
    ani();
});

Upvotes: 5

thatidiotguy
thatidiotguy

Reputation: 8991

The animate() function has an option to take a function to call when the animation ends. You could just do the same call, and voila.

Upvotes: 1

Related Questions