jquery淡入淡出堆积

Question

我有一些 jquery ajax，当它返回时，根据操作的结果，淡入和淡出页面上的各种 DIV 消息。例如：

$("#RefConflictSelf").fadeIn(1000).fadeOut(6000);

我喜欢这种效果，我想保留它。

当用户在单击另一个按钮触发另一个 ajax 操作之前至少等待 7 秒时，这可以正常工作。但是，如果他们一个接一个地点击按钮（实际上是合法的事情），淡入淡出的 div 开始堆积，因此您会看到这些 div 淡入淡出，用于用户不再关心的几个先前的操作。

总结：当用户点击第二个按钮时，他们不再关心第一次/上一个按钮点击后 div 的淡入/淡出。

问题：有没有办法立即隐藏任何“淡入或淡出”的 div，但仍然正确淡入最新按钮单击的消息？

我已经尝试过了：每当单击按钮时，我都会立即隐藏所有消息 div，例如：

$("#RefConflictSelf").hide();

这种方法可行，但很笨拙，因为如果您一个接一个地单击 5 个按钮 1，则较新的 div 消息将保持不可见，直到原始消息消失为止。所以“.hide()”似乎踩在了较新的“淡入”操作上，直到原始（或最新的非踩踏）的淡入淡出时间过去，一切都完成了。

我如何让 jquery 隐藏所有以前的淡入淡出的 div 消息，但然后让最新的 div 消息淡入，然后像往常一样淡出？ （当然，除非随后单击另一个按钮，在这种情况下，应踩下旧按钮，并允许新按钮工作。）

Answer 1

动画堆积的原因是 fadeIn() 和 fadeOut() 被添加到动画队列的速度比它们实际清除的速度更快（一对 7 秒，取决于您的持续时间）。因此，在调用新的淡入淡出动画之前需要清空队列。

这是通过使用stop(true) 来完成的，它是stop(true,false) 的缩写，指令jQuery 来（1）清除队列但（2）不跳转到动画的结束状态：

$("#RefConflictSelf").stop(true).fadeIn(1000).fadeOut(6000);

根据您想要达到的效果，有时stop(true,true) 可能更适合您的需求，因为它指示清除队列和跳转到当前排队动画的最终状态.

---

虽然您没有显示您的标记，但根据您的问题：

我如何让 jquery 隐藏所有以前褪色的 div 消息，但随后 允许最新的 div 消息像往常一样淡入然后淡出吗？ （除非 当然，然后单击另一个按钮，在这种情况下是旧按钮 应该被踩踏，并允许新的工作。）

...我感觉你在回收身份证。请记住，ID 在 HTML 文档中必须是唯一的。根据定义处理多个相同 ID 的浏览器行为仍未定义，但它通常会（智能地）选择第一个出现并忽略其余的。

p/s：我在一年前 几个月 处理 jQuery 动画时碰巧write an article why .stop() is very useful。