javascript - 如何仅在鼠标悬停监听器未处于事件状态时执行功能

Question

为了避免由于我的页面上的翻转效果而在屏幕上出现某种闪烁效果，我想激活来自 mouseOut 的功能仅当 mouseOver 时才显示缩略图不同缩略图上的状态当前没有发生。我该怎么做？

Answer 1

您可以检查是否有任何缩略图元素具有 active 类，该类会在成功的 mouseout 事件触发时添加。如果任何其他缩略图元素具有此类，则什么也不做，如果没有找到，则运行您的 mouseout 代码:

$('.thumb-element').on('mouseout', function () {
    if ($('.thumb-element').filter('.active-mouseout').length == 0) {
        //there are no elements with both the `thumb-element` class and the `active-mouseout` class so you can do work here
        $(this).addClass('active-mouseout').animate({top : 'XXpx'}, 250, function () {

            //now we remove the `active-mouseout` class so another `mouseout` event can run
            $(this).removeClass('active-mouseout');
        });
    }
});

然后您可以在必要时删除 active-mouseout 类，例如，如果它需要动画，那么您可以在该动画的回调中删除此类。

这是上述解决方案的 jsfiddle:http://jsfiddle.net/jasper/zg5g7/