title: Switching between div's with jQuery
body: <p>I have two div boxes <code>promo1</code> and <code>promo2</code>. <code>promo1</code> is displayed whereas <code>promo2</code> is hidden. Every x seconds I would like to switch the boxes so it hides <code>promo1</code> and fades in <code>promo2</code> and vice versa.</p>
  
  <p>Parden my scripting skills, I'm still learning lol.
  This is what I got so far..</p>
  
  <pre><code>function switch1(){
        $("#promo1").hide("fast");
        $("#promo2").fadeIn("slow");
  }
  function switch2(){
        $("#promo2").hide("fast");
        $("#promo1").fadeIn("slow");
  }
  $(document).ready(function() {
  
  setInterval( "switch1()", 5000 );
  setInterval( "switch2()", 10000 );
  
  });
  </code></pre>
  
  <p>Now the problem with this as you can see is the <code>switch2</code> overlaps with <code>switch1</code>. Is there a simpler way to do what I'm trying to achieve here?</p>