CODEWITHSUNDEEP
jquery
Stucky Bumpus
Stucky Bumpus

Reputation: 11

How can I infinitely repeat a jQuery Animation

How can I get this animation to repeat infinitely:

$(window).load(function () {

$("#ani-image").fadeIn(600, function () {
$("#ani-bluescreen").fadeIn(300);
$("#ani-text").fadeIn(300);
$("#ani-text").animate({ marginLeft: "400px",}, 400 );  
});  

var delay = 5000;

$("#ani-bg").delay(delay).fadeIn(1000, function () {
$("#ani-image-2").fadeIn(300); 
$("#ani-bluescreen-2").fadeIn(300); 
$("#ani-text-2").fadeIn(300);
$("#ani-text-2").animate({ marginLeft: "400px",}, 400 );
});

var delay = 10000;

$("#ani-bg-2").delay(delay).fadeIn(1000, function () {
$("#ani-image-3").fadeIn(300);
$("#ani-bluescreen-3").fadeIn(300);       
$("#ani-text-3").fadeIn(300);
$("#ani-text-3").animate({ marginLeft: "400px",}, 400 );
});

var delay = 15000;

$("#ani-bg-3").delay(delay).fadeIn(1000, function () {
});
});

Upvotes: 1

Views: 836

Answers (2)

Thomas Langston
Thomas Langston

Reputation: 3735

From http://plugins.jquery.com/project/timers

everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])

everyTime will add the defined function (fn) as a timed event to run at a given time interval (interval) for a given number of times (times). If times is set to 0, the number of times the method is called is unbounded. A label is also set for the given timed event either to the provided string (label) or to the string representation of the interval provided. Additionally, the interval can be defined by using a string such as "3s" for 3 seconds.

Upvotes: 1

Naftali
Naftali

Reputation: 146302

Wrap it all in a setInterval:

setInterval(function () {
  $("#ani-image").fadeIn(600, function () {
    $("#ani-bluescreen").fadeIn(300);
    $("#ani-text").fadeIn(300);
    $("#ani-text").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 5000;

  $("#ani-bg").delay(delay).fadeIn(1000, function () {
    $("#ani-image-2").fadeIn(300);
    $("#ani-bluescreen-2").fadeIn(300);
    $("#ani-text-2").fadeIn(300);
    $("#ani-text-2").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 10000;

  $("#ani-bg-2").delay(delay).fadeIn(1000, function () {
    $("#ani-image-3").fadeIn(300);
    $("#ani-bluescreen-3").fadeIn(300);
    $("#ani-text-3").fadeIn(300);
    $("#ani-text-3").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 15000;

  $("#ani-bg-3").delay(delay).fadeIn(1000, function () {});
}, 5000); // 5 seconds

Upvotes: 0

Related Questions