title: Toggle and fade Images in a group
body: <p>I have two groups of images named with the following patterns:</p>
  
  <p>Oranges1.jpg
  Oranges2.jpg
  Oranges3.jpg
  Oranges4.jpg</p>
  
  <p>Apples1.jpg
  Apples2.jpg
  Apples3.jpg
  Apples4.jpg</p>
  
  <p>On my page I have a div which displays a selection of images from each group:</p>
  
  <pre><code>&lt;div&gt;
  &lt;img src="Oranges1.jpg"/&gt;
  &lt;img src="Oranges2.jpg"/&gt;
  &lt;img src="Apples3.jpg"/&gt;
  &lt;img src="Apples4.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do via jQuery is to toggle and fade the images in between the two groups. For example, when the page loads the images above load. Then, after 5 seconds, the image groups toggle, so "Oranges1.jpg" becomes "Apples1.jpg", "Apples3.jpg" becomes "Oranges3.jpg" etc e.g:</p>
  
  <pre><code>&lt;div&gt;
  &lt;img src="Apples1.jpg"/&gt;
  &lt;img src="Apples2.jpg"/&gt;
  &lt;img src="Oranges3.jpg"/&gt;
  &lt;img src="Oranges4.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, every 5 seconds the images change to the opposite group but with the corresponding image number.</p>
  
  <p>Any ideas on the best approach?</p>
  
  <p>Thanks!</p>