title: setTimeout function is not called
body: <p>Before you jump onto the duplicate question, I must say I have looked through stackoverflow and other places before I came here.</p>
  
  <p>So basically, I'm using a sprite image and need to loop through the image inside it. In the code block below you'll find the way I have approached it right now. However, after adding the <code>setTimeout</code> function it seems like everything inside the function parameter is no longer executed.</p>
  
  <pre><code>var headerTimeout = 1000/24;
  
  jQuery('.headerGif').hover(function(){
      for(var i = 1; i &lt;= 41; i++){
          setTimeout(function(){
              if (jQuery(this).hasClass('.header-HeaderBedrijfsVideo00' + (i - 1))) {
                  jQuery(this).removeClass('.header-HeaderBedrijfsVideo00' + (i - 1));
              }
  
              jQuery(this).addClass('.header-HeaderBedrijfsVideo00' + i);
          }, headerTimeout);
      }
  });
  </code></pre>
  
  <p>If there is a better way to approach this, I would appreciate it if someone could point me into the right direction. I am already looking into just using a plugin for this purpose.</p>
  
  <p><strong>EDIT:</strong> I have tried checking the question that is in the duplicate marking, but that's basically what a closure does is it not? I just added the closure from one of the answers and it still does not work.</p>