title: JQuery thumbnail src rotator on hover (multiple images)
body: <p><strong>Situation:</strong> We've got this DIV with thumbnails who need their src being changed on hover:</p>
  
  <pre><code>&lt;div id="moreVideos"&gt;
  &lt;span class="mb"&gt;
      &lt;a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml"&gt;
          &lt;img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance"&gt;
      &lt;/a
  &lt;/span&gt;
  &lt;span class="mb"&gt;
      &lt;a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#"&gt;
          &lt;img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg"&gt;
      &lt;/a&gt;
  &lt;/span&gt;
  &lt;span class="mb"&gt;
      &lt;a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml"&gt;
          &lt;img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance"&gt;
      &lt;/a
  &lt;/span&gt;
  &lt;span class="mb"&gt;
      &lt;a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#"&gt;
          &lt;img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg"&gt;
      &lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Problem:</strong> On thumbnail hover we need to change the thumbnail src every 2 seconds from default.jpg -> 1.jpg -> 2.jpg -> 3.jpg -> default.jpg (loop through them while the mouse is hovering the thumb, after mouse out it need to stop and stay on the current image)</p>
  
  <p><strong>What I've tried:</strong> Plenty of sample codes from other websites and the JQuery cycle plugin. Trying to use this solution failed: <a href="https://stackoverflow.com/questions/2039750/jquery-continuous-animation-on-mouseover/2039769#2039769">jquery continuous animation on mouseover</a> </p>
  
  <p><strong>Will be used on:</strong> <a href="http://ListAndPlay.com" rel="nofollow noreferrer">http://ListAndPlay.com</a></p>
  
  <p>I'm very curious in how you would solve a problem like this :)!</p>