JQuery的问题与动画中的stop（）和延迟（） [英] JQuery problem with stop() and delay() within animation

问题描述

你可以在 http://jsfiddle.net/FrelCee/5zcv3/4/，我想这些动画div的3容器时盘旋。

As you can see on http://jsfiddle.net/FrelCee/5zcv3/4/ , i want to animate those 3 divs when the container is hovered.

问题是，当出现快速您悬停不止一次这个丑陋的队列。
我也尝试使用 .stop（）的功能，但在延迟（）是行不通的。

Problem is this ugly queue that appears when you fast hover more than once. I also tried using .stop() function, but then the delay() isn't working.

下面是stop（）函数和延迟（）问题的例子：的http：//的jsfiddle。净/ FrelCee / FHC99 / 22 /

Here is an example with stop() function and delay() problem : http://jsfiddle.net/FrelCee/FHC99/22/

有谁知道这没有更好的办法？


在此先感谢！

Does anyone know any better way to this?

Thanks in advance!

推荐答案

您只需要至少第一个参数提供给 .stop（真实，真实）清除当前队列，你可以决定是否你也想提供的第二个参数跳到动画结束下一个启动时（这是给你，因为它给出了一个稍微不同的效果）。你也需要把 .stop（）要求在 .delay（）这样你就不会清除 .delay（）。请参阅 .stop jQuery的 DOC（） 要了解这两个参数.stop（）。当我这样做，在这里： http://jsfiddle.net/jfriend00/pYgQr/ ，它似乎处理快速悬停/输出就好了。

You just need to supply at least the first parameter to .stop(true, true) to clear the current queue and you can decide if you also want to supply the second parameter to jump to the end of the animation when the next one starts (that's up to you as it gives a slightly different effect). You also need to place the .stop() calls before the .delay() so you aren't clearing the .delay(). See the jQuery doc for .stop() to understand the two parameters for .stop(). When I do that here: http://jsfiddle.net/jfriend00/pYgQr/, it seems to handle fast hover in/out just fine.

// On hover function
var hover = $('#container');
hover.hover(function(){

    $(this).find('#first').stop(true, true).animate({left:10}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:10}, 600);
     $(this).find('#third').stop(true, true).delay(250).animate({left:10}, 600);

}, function() {

    $(this).find('#first').stop(true, true).animate({left:-100}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:-100}, 600);
    $(this).find('#third').stop(true, true).delay(250).animate({left:-100}, 600);

}); // on mouse out hide divs

---

另外，我不知道为什么你在一开始这样做：

---

Also, I don't know why you're doing this at the beginning:

var hover = $('#container');
$(hover).hover(function(){

您可以做到这一点：

var container = $('#container');
container.hover(function(){

或本

$('#container').hover(function(){

---

在此外，没有理由这样做：

---

In addition, there is no reason to do:

$(this).find('#first')

这些都是必须在页面上是独一无二的，因此最好的IDS使用方法：

These are ids which must be unique in the page so it's better to use:

$('#first')

这将是jQuery的更快，因为它可以只使用的document.getElementById（'第一'）内部。

This will be faster in jQuery because it will be able to just use document.getElementById('first') internally.

这篇关于JQuery的问题与动画中的stop（）和延迟（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！