javascript - 如何使这个 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>

我想要的效果是对所有<tr class='slide'>加载页面后要隐藏的行，然后在鼠标指针进入上面的行时滑入 View 。只要鼠标指针保持在上面的行或 .slide 行(包含在 <tbody> 标记中)，我希望 .slide 行保持在 View 中。然后，当鼠标离开 <tbody> 中的任一行时，我希望 .slide 行从 View 中滑出。标签。我已经成功地使用以下代码完成了此操作。

<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>

虽然这行得通，但存在一个问题，即如果您将鼠标移动到多行上，它会设置一个巨大的抖动困惑，可以运行很长时间，直到所有动画完成。我想要做的是添加一个超时，以便在输入 <tbody> 后动画不会开始一秒钟左右。 .如果鼠标离开 <tbody>在动画被触发之前，它应该被取消。当鼠标指针离开 <tbody> slideUp 效果也应该延迟相同的量 - 我希望最后一个要求是，如果你从一个 <tbody> 向下移动接下来，slideDown 和 slideUp 效果将同时发生，因此看起来它们之间的标题行正在向上移动(我希望这有某种意义)。我已经尝试了几种方法来做到这一点，但都没有成功。我的最大努力如下；

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 秒后按预期滑入 View ，但旧行仍然存在。我的假设是我的计时器变量被无意中破坏了。我尝试通过一组计时器并为每一行分配一个特定的计时器来更具体地了解该过程，但这没有任何区别。 Javascript 不是我的强项，您可能已经看出来了。

Answer 1

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