title: jQuery mouseenter / hover stop animation in vertical carousel loop
body: <p>So i've built a really simple automatic vertical carousel that loops through a list of items, but now i need to stop the loop when the mouse enters the div, i've tried stop() but didn't work.</p>
  
  <p>My HTML looks something like this:</p>
  
  <pre><code>&lt;div class="relative pegascontainer"&gt;
  &lt;ul class='pegas'&gt;
      &lt;li&gt;
          &lt;div class="pega"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="pega"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="pega"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="pega"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>  </p>
  
  <p>And my JS (190 is just the height of the container):</p>
  
  <pre><code>var listi = $(".pegas").children("li"),
      listiNum = (listi.length)/2,
      listiMax = (listiNum*190)-190;
  
  function pegaLoop(){
      for (var i=0,len=listiNum; i&lt;len; i++){
  
          $(".pegas").animate({
              'margin-top': -190*i
          }, 500, function(){
              if($(this).css("margin-top") == "-"+listiMax+"px"){
                  $(this).animate({'margin-top': 0});
                  pegaLoop();
              }
          }).delay(1000);
  
      }
  
  };
  
  pegaLoop();
  </code></pre>
  
  <p>I've tried things like this, but didn't work:</p>
  
  <pre><code>$(".pegas").hover(function() { 
          $('.pegas').stop();
      }, function() {
          pegaLoop();
  });
  </code></pre>
  
  <p>Thanks in advance.</p>