jquery - 为什么我的 jQuery SlideDown/slideUp 'wear out' ？

Question

在the site I'm developing ，我有一些div由 AJAX 加载。它们由图片(显示)和一些文本(隐藏)组成。使用 jQuery 的 $.live()方法中，我让鼠标悬停在图片上时文本向下滑动，当鼠标离开图片时文本向上滑动。

但是，重复几次后(尤其是快速连续)，文本 div 不再扩展至其完整高度 - 通常，其高度会更改为单个像素。

我的JS代码如下:

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

HTML 结构如下:

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

(我知道将 div 放在 a 标签内是不好的做法，但即使我将 <a><div>...</div></a> 替换为具有 a 的 display:block ，问题也会出现)

这是一个JSFiddle显示问题。

Answer 1

尝试执行 .stop(true, true) 代替。

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

与.on()

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