title: jQuery cross fading two images on a loop!
body: <p>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.</p>
  
  <p>What I want to do: </p>
  
  <p>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.</p>
  
  <pre><code> $(document).ready(function(){
    $('#img1').hide()
  .load(function () {
    $(this).fadeIn(4500)
    .fadeOut(4500);
    $('#img2').hide().wait(9000)
    .load(function () {
    $(this).fadeIn(4500)
    .fadeOut(4500);
  });
  </code></pre>
  
  <p>Cheers, its driving me crazy. Ps can you try and give a little explanation to what is going on in you answer. Thanks</p>