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

发布于 2024-10-01 06:16:07 字数 2833 浏览 4 评论 0原文

我有一个 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 不是我的强项。

I have an html table that I am trying to add some animation to with jQuery. I am very close to what I want but have one outstanding issue. I will try to describe what I am doing with as cut-down a version of the table and scripts as possible.

The table is defined as follows;

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

The effect I want is for all of the <tr class='slide'> rows to be hidden once the page is loaded and then to slideDown into view when the mouse pointer enters the row above. I want the .slide row to remain in view as long as the mouse pointer remains in either the row above or the .slide row (contained within the <tbody> tags). I then want the .slide row to slideUp out of view when the mouse leaves either of the rows within the <tbody> tags. I have managed to do this successfully with the following code.

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

While this works it has the problem that if you run the mouse over multiple rows it sets up an enormous jiggly mess that can run for a long time until all of the animations finish. What I want to do is add a timeout so the animation doesn't start for a second or so after entering the <tbody>. If the mouse leaves the <tbody> before the animation is triggered it should be cancelled. When the mouse pointer leaves a <tbody> the slideUp effect should also be delayed by the same amount - My hope with this last requirement is that if you move down from one <tbody> to the next the slideDown and slideUp effects will occur at the same time so it just appears that the title row between them is moving up (I hope this makes some sort of sense). I have tried several ways of doing this but have been unsuccessful. My best effort is as follows;

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);
    });
});
};

This almost works. If I quickly enter then leave a row, no animation occurs. If I enter a row and wait 1 second the next row slides down as planned. If I then exit the row to the side then the hidden row slides up 1 second later as planned. But, if I enter the row below things go wrong. The new row slides into view as expected after 1 second but the old row persists. My assumption is that my timer variable is being unintentionally destroyed. I tried being a bit more specific about the process by having an array of timers and assigning a specific one for each row but this made no difference. Javascript is not my strong suit as you may be able to tell.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦里°也失望 2024-10-08 06:16:07

尝试使用 hoverIntent 插件,而不是尝试使用 mouseentermouseleave。我几乎总是使用hoverIntent而不是普通的悬停。

Try using the hoverIntent plugin instead of attempting to simulate "delayed hovering" with mouseenter and mouseleave. I almost always use hoverIntent instead of plain hover.

明月夜 2024-10-08 06:16:07

好吧,我终于解决了这个问题(也学到了很多东西)。

如果我在代码的 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 - 我要去健身房)。

OK, I finally solved this (and learned a lot too).

The code as provided works if I replace div with div2 in the mouseleave part of the code. Using the same variable name for up and down resulted in the animation not occurring. The only problem is that if I moused over numerous rows quickly I would still get unexpected results as this one variable name gets overused and abused.

My solution is to provide each .slide row with a unique id like so;

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

I then use this id to generate a dynamic variable name using eval and reference this in a string in setTimeout. My final code looks like this.

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);
    });
});
};

and works beautifully (in firefox at least, I'm too scared to try IE yet - I'm going to the gym instead).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文