Question

Really easy one here, I’m sure – I’m a beginner who’s struggling to integrate setInterval into my jQuery. I currently have this function, which rotates two images upon clicking them. I want this to happen automatically (every few seconds), and can’t seem to find the right way to use setInterval.

Could anyone point me in the right direction? Thanks a lot for any help.

Philip

$(document).ready(function(){
$("#spinitemholder1 .sponsorFlipphil1 img").click(function () {
          $(this).animate({ "width": "0px", "margin-left": "135px" }, 500, function () {
              $(this).parent().hide();
              $(this).width(0);
              $("#spinitemholder1 .sponsorFlipphil2 img").animate({ "width": "271px", "margin-left": "0px" });
              $("#spinitemholder1 .sponsorFlipphil2").show();
          });
      });
      $("#spinitemholder2 .sponsorFlipphil2 img").click(function () {
          $(this).animate({ "width": "0px", "margin-left": "135px" }, 500, function () {
              $(this).parent().hide();
              $(this).width(0);
              $("#spinitemholder1 .sponsorFlipphil1 img").animate({ "width": "271px", "margin-left": "0px" });
              $("#spinitemholder1 .sponsorFlipphil1").show();
          });
      });

});

Answer 1

Try this:

var interval = setInterval(function () {
  $("#spinitemholder1 .sponsorFlipphil1 img").trigger("click");
  $("#spinitemholder2 .sponsorFlipphil2 img").trigger("click");
}, 5000);

You have to use “trigger”. I would suggest to reset interval when user clicks one of the images. An easy way would be:

var interval = 0;
function startNewInterval() {
  clearInterval(interval); // clear previous one
  interval = setInterval(function () { // start new interval
    $("#spinitemholder1 .sponsorFlipphil1 img").trigger("click");
    $("#spinitemholder2 .sponsorFlipphil2 img").trigger("click");
  }, 5000);
}

$("#spinitemholder1 .sponsorFlipphil1 img").click(function () {
  $(this).animate({ "width": "0px", "margin-left": "135px" }, 500, function () {
    $(this).parent().hide();
    $(this).width(0);
    $("#spinitemholder1 .sponsorFlipphil2 img").animate({ "width": "271px", "margin-left": "0px" });
    $("#spinitemholder1 .sponsorFlipphil2").show();
    startNewInterval();
  });
});

$("#spinitemholder2 .sponsorFlipphil2 img").click(function () {
  $(this).animate({ "width": "0px", "margin-left": "135px" }, 500, function () {
    $(this).parent().hide();
    $(this).width(0);
    $("#spinitemholder1 .sponsorFlipphil1 img").animate({ "width": "271px", "margin-left": "0px" });
    $("#spinitemholder1 .sponsorFlipphil1").show();
    startNewInterval();
  });
});

startNewInterval();