Question

At the site I’m developing, I have some divs which are loaded by AJAX. They consist of a picture (displayed) and some text (hidden). Using jQuery’s $.live() method, I make the text slide down when the mouse hovers over the picture, and then slide back up when the mouse leaves it.

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.

My JS code is as follows:

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

And the HTML structure goes something like this:

<ul>
  <li>
    <a>
      <div class=box>
        <div class=picture>
        <div class=text>
      </div>
    </a>
  </li>
  <li> more of the same... </li>
  <li> ... </li>
</ul>

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

Here’s a JSFiddle displaying the problem.

Answer 1

Try to do .stop(true, true) instead.

http://jsfiddle.net/2X7Gt/8/

with .on()

http://jsfiddle.net/2X7Gt/9/