jquery - 检查是否所有元素都已悬停

Question

一旦所有元素完成“鼠标离开”，我就会尝试触发动画。

所以这是一个片段（我对名为“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();
});

小提琴