Why does my jQuery slideDown/slideUp 'wear out'?
<p>At <a href="http://poland.inbulgaria.org/" rel="nofollow">the site I'm developing</a>, I have some <code>div</code>s which are loaded by AJAX. They consist of a picture (displayed) and some text (hidden). Using jQuery's <code>$.live()</code> method, I make the text slide down when the mouse hovers over the picture, and then slide back up when the mouse leaves it.</p>

<p>However, after this is repeated several times (especially if in rapid succession), the text div doesn't expand to its full height any more - more often than not, its height changes to a single pixel.</p>

<p>My JS code is as follows:</p>

<pre><code>$(".rColOffer").live({
  'mouseenter':function(){
    $(".rColOffer_text",this).stop(true).delay(200).slideDown(200);
  },
  'mouseleave':function(){
    $(".rColOffer_text",this).stop(true).slideUp(200);
  }
});
</code></pre>

<p>And the HTML structure goes something like this:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;
    &lt;a&gt;
      &lt;div class=box&gt;
        &lt;div class=picture&gt;
        &lt;div class=text&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt; more of the same... &lt;/li&gt;
  &lt;li&gt; ... &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><em>(I know putting a <code>div</code> inside an <code>a</code> tag is bad practice, but the problem manifests even if I replace the <code>&lt;a&gt;&lt;div&gt;...&lt;/div&gt;&lt;/a&gt;</code> with an <code>a</code> which has <code>display:block</code>)</em></p>

<p>Here's a <a href="http://jsfiddle.net/2X7Gt/7/" rel="nofollow">JSFiddle</a> displaying the problem.</p>
