Home/ Questions/Q 8425527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T04:17:42+00:00

I’m trying to set up three divs to animate (as an example) and once

  • 0

I’m trying to set up three divs to animate (as an example) and once animation is complete on all animations, run the function that kicks off the animation again.

The callback works fine if I stick an alert in there rather than the function name, but with the function name, nothing:

$(function () {
function runIt() 
{
    $('.three').animate({'background-position-x': "-200px", 'background-position-y': "0px"}, 500,'linear');
    $('.two').animate({'background-position-x': "-400px", 'background-position-y': "0px"}, 500, 'linear');
    $('.one').animate({'background-position-x': "-600px", 'background-position-y': "0px"}, 500, 'linear', runIt);
}
runIt();
});

The animation speed would be significantly bumped up, it’s just easier for the sake of testing to have it only take half a second!

jsfiddle here: http://jsfiddle.net/erinfreeman/J9Htj/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check out this fiddle. Works in Safari 6.

    $(function () {
    function runIt() 
    {
        $('.three').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-200px", 'background-position-y': "0px"}, 500);
        $('.two').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-400px", 'background-position-y': "0px"}, 500);
        $('.one').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-600px", 'background-position-y': "0px"}, 500, runIt);
    }
    runIt();
});

    Reset the values on every iteration.
    ​

    • 0