title: $(this) in timeout (again)
body: <p>Using the nice <code>animate.css</code> I would like to animate with a <code>pulse</code> animation all the elements in the class <code>pulsating</code> on a <code>hover</code> event. The animation should stop when the mouse pointer leaves the element.</p>
  
  <p>The following code works:</p>
  
  <pre><code>$('.pulsating').each(function() {
      $(this).hover(
          function() {$(this).addClass('animated infinite pulse');},
          function() {$(this).removeClass('animated infinite pulse');}
          ); // hover
  }); // each .pulsating
  </code></pre>
  
  <p>However I would like the transition to continue for a bit when the mouse goes away. So, after some attempts and a search here, I implemented this function:</p>
  
  <pre><code>$('.pulsating').each(function() {
      $(this).hover(
          function() {$(this).addClass('animated infinite pulse');},
          function() {var el=$(this); window.setTimeout(function(){el.removeClass('animated infinite pulse');}, 2000);} 
          ); // hover
  }); // each .pulsating
  </code></pre>
  
  <p>As you can see I keep a reference to <code>$(this)</code> but it does not work: the hovered elements keep pulsating ad infinitum. </p>