title: jquery: mouseleave event seems to fire when it's not supposed to
body: <p>Given the following html table and script shown below I am having a problem where the mouse leave event appears to fire right after the mouse enter, even if I don't move the mouse out of the row.  </p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
      function highlightRows(iMainID) 
      {
          $('tr[mainid=' + iMainID+ ']').each(function() {
              if ($(this).attr('old') == undefined) {
                  $(this).attr('old', $(this).css('backgroundColor'));
              }
              $(this).animate({ backgroundColor: "#FFFFCC" }, 500);
              $(this).mouseout(function() {
                  if ($(this).attr('old') != undefined) {
                      $(this).animate({ backgroundColor: $(this).attr('old') }, 500);
                  }
              });
          });        
      }
  &lt;/script&gt;
  &lt;table&gt;
      &lt;tr&gt; 
        &lt;td mainid="1" onmouseover='highlightRows(1)'&gt;&lt;div&gt;text&lt;/div&gt;&lt;/td&gt;
        &lt;td mainid="1" onmouseover='highlightRows(1)'&gt;&lt;div&gt;text&lt;/div&gt;&lt;/td&gt;      
        &lt;td mainid="2" onmouseover='highlightRows(2)'&gt;&lt;div&gt;text&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;table&gt;
  </code></pre>