Saturday, September 03rd

Client wanted looping images for a graphic and a free shipping graphic. Voila. The below example uses placeholder images. What I learned was that the function you embed in your transition function is executed after the transition. This, coupled with the delay function allowed me to achieve the simple loop. It is not a "cross-fade", which would require some absolute positioning, but the coding was straightforward.

<img id="image1" src="http://lorempixel.com/city/200/200"><img id="image2" style="display:none;" src="http://lorempixel.com/people/200/200">

loopStart();

function loopStart() {
  $("#image1").delay(2000).fadeOut("slow", function() {
    loopTwo();
  });
};

function loopOne() {
  $("#image1").fadeIn("slow", function() {
    $("#image1").delay(2000).fadeOut("slow", function() {
      loopTwo();
    });
  });
};

function loopTwo() {
  $("#image2").fadeIn("slow", function() {
    $("#image2").delay(2000).fadeOut("slow", function() {
      loopOne();
    });
  });
};
Subscribe

Subscribe