检查是否所有元素都被徘徊过

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

当鼠标离开一个箱子，检查是否所有的箱子已通过使用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

Answer 2

我会简单地存储尚未悬停元素的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(); 
      } 
    }); 
})();