How do I alternate display of 2 elements continuously in jQuery?

Question

I have two image elements:

<img src="/image1.gif" id="id1" /><img src="/image2.gif" id="id2" />

I'm trying to create a continuous loop in jQuery whereby image1.gif is shown for 1 second, then disappears and image2.gif is shown for 1 second and so on, alternating for N seconds.

I've just about hit a wall with it.

Has anyone got any ideas?

Thanks in advance.

Answer 1

To toggle, you can just use setInterval() and .toggle() both elements, effectively swapping them, like this:

$("#id2").hide(); //start with the frst
setInterval(function() {
  $("#id1, #id2").toggle();
}, 1000);