title: jquery stop method causing ie6 to stack overflow
body: <p>I have six menu options in my webapp, and when the user hovers over a link (ul>li>a) I switch an image to show a context relevant photo, and I fade the image in and out.  However, I noticed that when a user moved their mouse quickly between links, the queue didn't process properly and the user would often be hovering over a link and have an old image displayed from the previous hover.  After a bit of reading, it appeared the right thing to do was to use the stop() method, but when I try and implement it, ie6 reports a stack overflow.</p>
  
  <p>Here's my old code (which has the old image problem):</p>
  
  <pre><code>if(webImage != 'img/template/slide_web.png') {
                          $('#slide img').fadeOut(function() {
                              $(this).load(function() {$(this).fadeIn(); });
                              $(this).attr('src','img/template/slide_web.png');
                          });
  </code></pre>
  
  <p>And here's my new code (which resolves the old problem, but causes ie6 to stack overflow on the first line):</p>
  
  <pre><code>if(webImage != 'img/template/slide_web.png') {
                          $('#slide img').stop(true, true).fadeOut(function() {
                              $(this).load(function() {$(this).stop(true, true).fadeIn(); });
                              $(this).attr('src','img/template/slide_web.png');
                          });
  </code></pre>
  
  <p>Am I implementing the stop() method incorrectly?  Or is there another way to avoid the jQuery fade queue from losing it's place?</p>