Question

我有这个简单的mouseenter：mouseleave动作：

call = $('.js-call');

call.on({
    mouseenter: function(e){
       // animation
       e.stopPropagation();
    },
    mouseleave: function(e){
        // animation
    }
});

在这个动作中，我有两个CSS动画，持续时间为300毫秒。如何在动画结束时阻止鼠标悬停事件，如果我正在使用呼叫元素，则再次触发它。当我快速移动我的呼叫元素动作呼叫多次。怎么预防呢？求助。

Answer 1

我会在两个事件上都设置超时，并且只有在超时结束时仍然满足条件时才激活动画。这样的事情：

var timeoutIn, timeoutOut, delay = 300;
$element.hover(
    function() {
        if (timeoutOut){
            clearTimeout(timeoutOut);
        }
        timeoutIn = setTimeout(function() {
            // ##################
            // 'MOUSEENTER' STUFF GOES HERE
            // ##################
        }, delay);
    },
    function() {
        if (timeoutIn){
            clearTimeout(timeoutIn);
        }
        timeoutOut = setTimeout(function() {
            // ##################
            // 'MOUSELEAVE' STUFF GOES HERE
            // ##################
        }, delay);
    }
);

更新：我刚刚创建了一个名为jQuery.hoverDelay.js的jQuery插件，你可以在这里查看： jQuery hoverDelay.js

Answer 2

您可以使用.bind( eventType [, eventData ], handler(eventObject) )。

在完成动画后绑定事件mouseleave，反之亦然。这应该解决它。

Answer 3

使用jQuery .stop()是正确的方法。

这是一个工作小提琴开始和停止使用mouseenter和mousleave的动画，如果已经运行了动画，则无需启动新动画。

http://jsfiddle.net/CZtLe/

function animateMe(element, color) {
    element.stop(true).animate({
        backgroundColor: color,
        duration: 300
    });
}

$(function () {
    call = $('.js-call');
    call.on({
        mouseenter: function (e) {
            animateMe($(this), '#FF0000');
            e.stopPropagation();
        },
        mouseout: function (e) {
            animateMe($(this), '#000000');
        }
    });

});

如何使用jQuery防止mouseenter事件操作

3 个答案: