title: Show hide 2 DIVs with Jquery in x amount of seconds
body: <p>I have two div's. The video div contain flash video. The photo div contains an image.</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="video"&gt;flash embed file&lt;/div&gt;
  &lt;div id="photo" style="display:none;"&gt;image&lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>I want to display the video div for x amount of seconds, then hide the video, then fade to the photo div.</p>
  
  <p>It would be great if the code was reuseable because I have 4 sets of video/image divs on one page</p>
  
  <p>TIA</p>
  
  <p>Thanks for the quick response everyone</p>
  
  <p>In the end I went with 'mu is too short''s solution. It uses Jquery, was simplistic and works in all 5 main browsers</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  n = 20; // Or however many seconds you want to delay.
  setTimeout(function() {
      $('#video').fadeOut();
      $('#photo&gt;').fadeIn();
  }, n * 1000);
  });
  &lt;/script&gt;
  
  &lt;div id="container"&gt;
  &lt;div id="video"&gt;flash embed file&lt;/div&gt;
  &lt;div id="photo" style="display:none;"&gt;&lt;a href="#"&gt;image&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;
  </code></pre>