jQuery Loop of Animations

Question

I'm trying to create a looped animation, a chain if you will, it works fine, but when I add to setTimeouts into the equation, which are critical to the timing, it breaks.

Here's the code:

$(document).ready(function(){
    setTimeout(function(){
      $("#medwheel-iphone").fadeOut().animate({marginTop: "5%"});
      $("#visualiser-bg").delay(1000).fadeIn();
      $('#visualiser-ipad').delay(2000).fadeIn().animate({marginTop: "3%"}, 2000);

      setTimeout(function(){
        $("#visualiser-ipad").fadeOut().animate({marginTop: "5%"});
        $("#visualiser-bg").delay(1000).fadeOut();
        $('#medwheel-iphone').delay(2000).fadeIn().animate({marginTop: "3%"}, 2000);
      }, 10000);

    }, 10000);
  });

Question is, how do I loop this continuously?

Answer 1

Use this code:

$(document).ready(function(){

    function anime_1()
    {
        $("#medwheel-iphone").fadeOut().animate({marginTop: "5%"});
        $("#visualiser-bg").delay(1000).fadeIn();
        $('#visualiser-ipad').delay(2000).fadeIn().animate({marginTop: "3%"}, 2000);
        setTimeout(function(){
            anime_2();
        }, 10000);
    }

    function anime_2()
    {
        $("#visualiser-ipad").fadeOut().animate({marginTop: "5%"});
        $("#visualiser-bg").delay(1000).fadeOut();
        $('#medwheel-iphone').delay(2000).fadeIn().animate({marginTop: "3%"}, 2000);
        setTimeout(function(){
            anime_1();
        }, 10000);
    }

    setTimeout(function(){
        anime_1();
    }, 10000);

});