jQuery：当鼠标静止/不安全动画队列/停止动画时，不要重复动画

Question

这或多或少是一个基本的jQuery-Question。

以下是我的问题：

我有一个mouseenter功能。因此，当我进入特定容器时，动画开始。问题是，当我在几秒内输入此容器10次，然后动画重复并重复...但我只想要一次...希望你理解。

这是一个展示我的问题的视频： http://youtu.be/5Cb0qHKtl_c

或者看这里： http://jsfiddle.net/meNK5/

$('.project').mouseenter(function() {
    $( this )
        .find('.info').fadeIn(200);
    $( this )
        .find('div.image').fadeTo( "slow", 0.15 );
});

$('.project').mouseleave(function() {
    $('.info').fadeOut();
    $( this )
        .find('div.image').fadeTo( "slow", 1 );
});

我需要做些什么来规范动画？

Answer 1

您应该使用jquery的stop来停止上一个动画，然后再开始新动画：

http://jsfiddle.net/meNK5/1/

$( this ).find('.info').stop(true,true).fadeIn(200);

Answer 2

使用.one('mouseenter', myFunc)代替.mouseenter(myFunc)

http://api.jquery.com/one/

编辑：如果你想多次做动画，但没有两个动画重叠，建议使用.is(':animated');：

$('.project').mouseenter(function() {
    if(! $(this).is(':animated')) {
        // start a new animation ...
    }
});

可以为您提供更多控制的更多参与解决方案如下：向您的对象引入两种不同的状态，最容易通过使用带有（.toggleClass()）的类来完成。 jQuery为':animated'做了类似的事情。

Answer 3

一种简单的方法（可能不是最合适的方法）是在mouseenter函数上设置变量，并在动画结束时禁用它。像（这是伪代码）的东西：

var active = 0;
$('#myObject').mouseenter(function() {
    if(active == 0) {
        active = 1;
        startAnimation();
    }
}

function startAnimation(){
    // start my animation
    ...
    // end of animation
    active = 0;
}