title: Prevent hover effect from looping
body: <p>I made a hover effect which toggles a top block to <code>slide up/down</code> at the same time the <code>bottom block slides up / down</code>.</p>
  
  <p>As you can see in the Fiddle: <a href="https://jsfiddle.net/wmaL1pm5/1/" rel="nofollow noreferrer">https://jsfiddle.net/wmaL1pm5/1/</a></p>
  
  <p>However, if you swipe your mouse fast on and off the block the hover effects keeps repeating even if you are not on that block anymore. </p>
  
  <p>In my HTML I have 2 row's with each 3 row containing 3 of these blocks. If you swipe your mouse of these rows all of the blocks are repeating their hover effect.</p>
  
  <p>How can I prevent the hover effect from looping if you hover another block or if your mouse is on the current block.</p>
  
  <p>Below my current jQuery code:</p>
  
  <pre><code>$(".usp-hover").mouseenter( function(){
       $( this ).find( ".usp-block-title" ).slideToggle('slow')
       $( this ).find( ".usp-block-hover" ).removeClass("usp-block-hidden");
       $( this ).find( ".usp-block-hover" ).slideDown('slow')
  });
  
  $(".usp-hover").mouseleave( function(){
       $( this ).find( ".usp-block-title" ).slideToggle('slow')
       $( this ).find( ".usp-block-hover" ).slideToggle('slow')
  });
  </code></pre>