jQuery mouseenter event firing uncontrollably
<p>I was wondering if anyone has run into this before, or can tell me what's wrong with my code.</p>

<p>I have a button that on mouseenter, widens and changes the text. On mouseleave, it reverts back to its orignal state.</p>

<p><a href="http://jsfiddle.net/rurabe/Esvag/1/" rel="nofollow">I set up a jsfiddle here.</a> This is the relevant code (abbreviated):</p>

<pre><code>var labelChanger = function (off, on) {
  $el.off('mouseenter').off('mouseleave');
  $el.mouseenter(function (e) {
      e.stopPropagation();
      changeContent(on);
      $(this).animate({'width': '70%'}, 50);
  }).mouseleave(function (e) {
      e.stopPropagation();
      changeContent(off);
      $(this).animate({'width': '50%'}, 50);
  });
};
</code></pre>

<p>It works okay, but there is a weird thing happening where if the mouse enters the box from the top or bottom, it can get into a state where any movement of the mouse triggers a mouseenter event (this happens approximately 25% of the time.) You can see it firing by the element 'flickering' and I added a log of sorts underneath it.</p>

<p>But if the mouse enters from the side, it is stable and will act as expected.</p>

<p>Does anyone know why this is??? I'm stumped.</p>
