如何让 jquery 动画延迟正常工作？

Question

我有一个 html 表，我正在尝试使用 jQuery 添加一些动画。我非常接近我想要的，但有一个悬而未决的问题。我将尝试使用尽可能精简的表格和脚本版本来描述我正在做的事情。

该表定义如下；

<table>
  <tbody class="group">
    <tr>First</tr>
    <tr class='slide'><div class='hidden'>Surprise!</div></tr>
  </tbody>
  <tbody class="group">
    <tr>Second</tr>
    <tr class='slide'><div class='hidden'>Surprise!</div></tr>
  </tbody>
  <tbody class="group">
    <tr>Third</tr>
    <tr class='slide'><div class='hidden'>Surprise!</div></tr>
  </tbody>
</table>

我想要的效果是在页面加载后所有 行都隐藏，然后当鼠标指针进入上面的行时滑入视图。我希望只要鼠标指针保留在上面的行或 .slide 行（包含在 标记内）中，.slide 行就保持在视图中。然后，当鼠标离开 标记内的任一行时，我希望 .slide 行滑出视图。我已经成功地使用以下代码成功地做到了这一点。

<script>

$(function() {
  hideRows();
  setupEventHandlers(); 
});

function hideRows() {
  $("div.hidden").each(function() {
    $(this).hide();
});
};
//The hideRows function is much more complicated in my actual page
//as I have to calculate the div height prior to hiding so it animates
//correctly. That's why I don't just set display:none; in the stylesheet.

function setupEventHandlers() {
  $('.group').mouseenter(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      $(this).slideDown();
    });
  });
  $('.group').mouseleave(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      $(this).slideUp();
    });
});
};
//note that I have to animate the div rather than the tr
//as slidedown and slideup don't work on table rows

</script>

虽然这种方法有效，但存在一个问题，即如果您在多行上运行鼠标，则会产生巨大的不稳定混乱，该混乱可能会运行很长时间，直到所有动画完成。我想要做的是添加一个超时，这样动画在输入 后一秒钟左右就不会开始。如果鼠标在触发动画之前离开，则应将其取消。当鼠标指针离开 时，slideUp 效果也应该延迟相同的量 - 我希望最后一个要求是，如果您从一个 向下移动， 接下来，slideDown 和 slipUp 效果将同时发生，因此它们之间的标题行似乎正在向上移动（我希望这有某种意义）。我尝试了几种方法来做到这一点，但都没有成功。我的最大努力如下；

var timer;

function setupEventHandlers() {
  $('.group').mouseenter(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      div = $(this);
      timer = setTimeout("div.slideDown();",1000);
    });
  });
  $('.group').mouseleave(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      clearTimeout(timer);
      div = $(this);
      setTimeout("div.slideUp();",1000);
    });
});
};

这几乎有效。如果我快速输入然后离开一行，则不会发生动画。如果我输入一行并等待 1 秒，下一行就会按计划向下滑动。如果我随后将该行退出到一侧，则隐藏行会按计划在 1 秒后向上滑动。但是，如果我输入下面的行，就会出错。 1 秒后，新行按预期滑入视图，但旧行仍然存在。我的假设是我的计时器变量被无意破坏。我尝试通过使用一组计时器并为每一行分配一个特定的计时器来使该过程更加具体，但这没有什么区别。正如你可能知道的那样，Javascript 不是我的强项。

Answer 1

尝试使用 hoverIntent 插件，而不是尝试使用 mouseenter 和 mouseleave。我几乎总是使用hoverIntent而不是普通的悬停。

Answer 2

好吧，我终于解决了这个问题（也学到了很多东西）。

如果我在代码的 mouseleave 部分中将 div 替换为 div2，则所提供的代码将有效。向上和向下使用相同的变量名称会导致动画不发生。唯一的问题是，如果我快速将鼠标悬停在许多行上，我仍然会得到意想不到的结果，因为这个变量名称被过度使用和滥用。

我的解决方案是为每个 .slide 行提供一个唯一的 id，如下所示；

<tr class='slide'><div class='hidden'>Surprise!</div></tr>

然后，我使用此 id 使用 eval 生成动态变量名称，并在 setTimeout 中的字符串中引用它。我的最终代码如下所示。

var timer;

function setupEventHandlers() {
  $('.group').mouseenter(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      id = this.id;
      eval("divdown_" + id + " = $(this);");
      downstring = "divdown_" + id + ".slideDown();";
      timer = setTimeout(downstring,1000);
    });
  });
  $('.group').mouseleave(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      clearTimeout(timer);
      id = this.id;
      eval("divup_" + id + " = $(this);");
      upstring = "divup_" + id + ".slideUp();";
      setTimeout(upstring,1000);
    });
});
};

并且工作得很好（至少在 Firefox 中，我还不敢尝试 IE - 我要去健身房）。