title: jquery crossfade two divs together in same function
body: <p>I have a rotating / fading div in jquery, which is working well, but I now want it to do the same to a second div on the same page, but cant get that to work.</p>
  
  <p>My current code is:</p>
  
  <pre><code>$(window).load(function() {
  setInterval('cycleImages()', 5000);
  })
  
  function cycleImages() {
  var $active = $('#main-photo-area .active');
  var $next = ($('#main-photo-area .active').next().length &gt; 0) ? $('#main-photo-area .active').next() : $('#main-photo-area div:first');
  $next.css('z-index', 2);
  $active.fadeOut(1500,function() {
    $active.css('z-index', 1).show().removeClass('active');
    $next.css('z-index', 3).addClass('active');
  });
  }
  </code></pre>
  
  <p>Which works fine and crossfades the div id="main-photo-area" fine, by changing the z-indexes of the divs within the container.</p>
  
  <p>I now also want the same piece of code to fade another set of divs, eg: id="second-photo-area".</p>
  
  <p>Can anyone see how I can alter this cycleImages() script to fade both div sets at the same time, without needing to add another routine to do this?</p>
  
  <p>I know there are plenty of other ways to do this, but I want to be efficient with the code that is there already, and not add another routine if possible.</p>
  
  <p>Thanks in advance.</p>