檢查是否所有元素都被徘徊過

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(); 
      } 
    }); 
})();