jquery队列_通过清除队列清理JQuery动画

jquery队列

If you’ve done any animation work with JQuery, particularly repeated animation cycles, you may find that your JavaScript-manipulated DOM exhibits odd behaviors after awhile, leaving elements cloned on the page, or in a half-animated state. This is particularly annoying because the effect is often subtle, appearing only after several cycles through the animation.

如果您使用JQuery完成了任何动画工作，尤其是重复的动画循环，您可能会发现JavaScript操纵的DOM在一段时间后表现出奇怪的行为，从而使元素克隆在页面上，或者处于半动画状态。 这是特别令人讨厌的，因为效果通常是微妙的，仅在动画循环数次后才出现。

This phenomenon is known as “JQuery animation queue buildup”. Very simply, JQuery queues the animation tasks it must perform. If too many initiations of those animations take place – a mouseover effect being triggered too many times, or an animation cycle running for an extended period – JQuery’s animation queue becomes disorderly and confused.

这种现象称为“ JQuery动画队列累积”。 很简单，JQuery将其必须执行的动画任务排队。 如果这些动画的启动次数过多–鼠标悬停效果被触发了太多次，或者动画周期运行了很长时间– JQuery的动画队列就会变得混乱而混乱。

This is something that is absent in CSS, but can plague JQuery. Aside from switching to CSS3 for your animation, there are two other solutions, depending on your needs:

这是CSS中缺少的东西，但是会困扰JQuery。 除了为动画切换到CSS3之外，还有其他两种解决方案，具体取决于您的需求：

1. Like most everything else in JQuery, where there’s a problem, there’s a plugin. hoverFlow forces the JQuery queue to process only one animation cycle at a time, which may be particularly useful for user-initiated JQuery animation events that are quick-firing, such as mouseover hover effects.

   像JQuery中的大多数其他内容一样，有问题的地方也有插件。 hoverFlow强制JQuery队列一次仅处理一个动画周期，这对于快速触发的用户启动的JQuery动画事件(例如鼠标悬停效果)特别有用。

2. For all other cases, the solution is simple: stop() any animation before starting it. This clears the animation queue, preventing any buildup. For example in the “Simple JQuery News Ticker” article I wrote, you could simply add this to the event chain:

   对于所有其他情况，解决方案很简单：在启动动画之前先将其stop() 。 这将清除动画队列，防止任何堆积。 例如，在我撰写的“ Simple JQuery News Ticker ”文章中，您可以将其添加到事件链中：

$('ul#to-do-list li:first').stop().fadeOut('slow', function()

It is still possible for the JQuery animation queue to get confused under some circumstances and in some browsers (for example, leaving the tab that contains your page active but hidden for an extended period of time in Firefox), but on the whole the solutions described work well.

在某些情况下和某些浏览器中，JQuery动画队列仍然可能会感到困惑(例如，将包含页面的选项卡保持活动状态，但在Firefox中将其隐藏很长一段时间)，但总体而言，所描述的解决方案做得好。

翻译自: https://thenewcode.com/219/Clean-Up-JQuery-Animation-By-Clearing-The-Queue

jquery队列