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/

为什么我的jQuery slideDown / slideUp'磨损'？

1 个答案: