title: Adding pause on hover to setInterval()?
body: <p>Hi here's my jquery function for slideshow with other inbuilt function.
  I have been trying to make it pause when i hover over the overall div. Help me out!</p>
  
  <pre><code>$(function() {
  var timer = setInterval( showDiv, 5000);
  var counter = 2;
  function showDiv() {
  
  if (counter ==0) { counter++; return; }
  
  $('div','#slide-show-overall')
    .stop()
    .fadeOut('slow')
    .filter( function() { return this.id.match('picture-set-' + counter); })   
    .fadeIn('slow');
    if (counter ==2) { slideWings();} //extra functions
    if (counter ==1) { resetWings();} //extra functions
  counter == 3? counter = 1 : counter++; 
  }
  });
  });
  </code></pre>
  
  <p><br><br></p>
  
  <pre><code>&lt;div style="position:absolute;width:1000px;height:600;top:0px;z-index:0;overflow:hidden;" id="slide-show-overall" &gt;
  &lt;div id="picture-set-1" style=""&gt;
  &lt;img src="images/3.jpg" align=left width=1000&gt;
  &lt;/div&gt;
  &lt;div id="picture-set-2" style="display:none;"&gt;
  &lt;img src="images/1.jpg" align=left width=1000&gt;
  &lt;img src="images/wing_left.png" align=left height=200 width=200 style="margin-top:-900px;margin-left:230px;" id="wing-left-1"&gt;
  &lt;img src="images/wing_right.png" align=left height=200 width=200 style="margin-    top:-900px;margin-left:830px;" id="wing-right-1"&gt;
  &lt;/div&gt;
  &lt;div id="picture-set-3" style="display:none;"&gt;
  &lt;img src="images/5.jpg" align=left width=1000&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>