jQuery cross fading two images on a loop!

Question

I am having trouble working out how to get a simple fade in fade out loop to work. I am pretty new to jQuery as you can maybe tell. I have had a go at it but now it’s taking too long to work out so I thought I would ask for some help.

What I want to do:

I have two Images, id's #img1 and #img2. I want image 1 to fadeIn then wait for lets say 6 seconds then fade out. I have tried the .wait function but it just stopped the little I had from working. I managed to get the first image to fade in and then out but with no wait in between. I then want to start fading image 2 in while image 1 is fading out then Image 2 to wait then fade out while image 1 fades in again and loop forever! Hope that makes sense.

 $(document).ready(function(){
  $('#img1').hide()
.load(function () {
  $(this).fadeIn(4500)
  .fadeOut(4500);
  $('#img2').hide().wait(9000)
  .load(function () {
  $(this).fadeIn(4500)
  .fadeOut(4500);
});

Cheers, its driving me crazy. Ps can you try and give a little explanation to what is going on in you answer. Thanks

Answer 1

Edit 2+ years later: There are better ways to do this... so ignore this answer.

---

I would try a combination of callbacks and setTimeout. (I'm going to build on Kobi's response, since he posted while I was typing.)

In CSS, give both images a "display: none;" instead of setting them to hidden at the beginning in jQuery. Then in jQuery:

function imageOneFade(){
  $('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); });
}

function imageTwoFade(){
  $('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); });
}

$(document).ready(function(){
   imageOneFade();
});

Hopefully something like that you work.

The setTimeout function takes two parameters.

setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT)

And the fadeIn/Out functions can have a second parameter that will trigger when the effect is finished.