Question

我试图在所有元素完成'mouseleave'后触发动画。

所以这里有一个片段（我已经为其他名为“box1，box3”的元素重复了这一点）

$("#box4").mouseleave(function () {

    $(".contentBox4").hide("slide", {
        direction: "right"
    }, 100);
    $("#box4.gridBox.grid-darker").fadeTo(500, 0);

    $(this).unbind("mouseenter").unbind("mouseleave");

});

var boxes = ('#box1, #box3, #box4');
var hasBeenHovered = false;

$(boxes).mouseleave(function () {
    hasBeenHovered = true;

    if (hasBeenHovered) {
        $(".introTitle").fadeIn();
    }
});

所以现在，当鼠标离开每个元素时，它会执行动画，而不是......当它离开所有元素时。

所以，如果有人能提供任何见解，非常感谢！

Answer 1

我只想存储悬停元素的ID：

(function(){
    var boxes = $('#box1, #box3, #box4'); 
    var yetHoveredElements = {}, nbToHover = boxes.length;
    boxes.mouseleave(function(){
           if (yetHoveredElements[this.id]) return;
           yetHoveredElements[this.id] = true;
           if (--nbToHover==0) {
              $(".introTitle").fadeIn(); 
           }
    });
})();

Answer 2

当鼠标离开一个方框时，检查所有方框是否已悬停，方法是在方框悬停后使用data()设置标记等等：

var boxes = $('#box1, #box3, #box4');

boxes.one('mouseleave', function() {
    var allHovered = true;
    $(this).data('hovered', true);

    boxes.each(function(i, box) {
        if ( $(box).data('hovered') != true ) allHovered = false;
    });

    if (allHovered)
       $(".introTitle").fadeIn();
});

FIDDLE

检查是否所有元素都悬停在上面

2 个答案: