Writing a JQuery/Javascript fading function
<p>I am trying to write one function that will be able to fade in/out images inside multiple divs on a single HTML page.  The images in the Divs would need to fade in at the same times from each div.  Then fade out followed by the next image in the div.  Sort of creating a mini image rotation presentation in each div. </p>

<p>I cannot wrap my head around this :)  I can easily make this happen without a function on a page, however, I want something that I can easily repeat with as many div's on the page as I desire.  Can someone please educate me :)  Thanks in advance for any suggestions, I have not been able to find this online.</p>

<p>EXAMPLE</p>

<pre><code>function imageRotationFunction(var1, var2, var3) {
   //logic I need help with
}
</code></pre>

<p>.</p>

<pre><code>imageRotationFunction(&lt;array of ID's to fade&gt;, &lt;number of seconds to fade in&gt;, &lt;number of seconds between fades&gt;);
</code></pre>

<p>HTML PAGE HAS:</p>

<pre><code>&lt;div id='fadein0'&gt;
  &lt;img class='imageRotation' src='someimage0.png'&gt;
  &lt;img class='imageRotation' src='someimage1.png'&gt;
  &lt;img class='imageRotation' src='someimage2.png'&gt;
  &lt;img class='imageRotation' src='someimage3.png'&gt;
&lt;/div&gt;

&lt;div id='fadein1'&gt;
  &lt;img class='imageRotation' src='otherimage0.png'&gt;
  &lt;img class='imageRotation' src='otherimage1.png'&gt;
  &lt;img class='imageRotation' src='otherimage2.png'&gt;
  &lt;img class='imageRotation' src='otherimage3.png'&gt;
&lt;/div&gt;
</code></pre>
