Check if all elements have been hovered over

Question

I am trying to trigger an animation once all elements have completed 'mouseleave'.

so here is a snippet (I have this repeated for the other elements named "box1, box3" as well)

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

So right now, when mouse leaves each of the elements, it performs the animation, rather than.. when it leaves ALL of the said elements.

So if anyone can provide any insight, much thanks!

Answer 1

When the mouse leaves a box, check if all boxes has been hovered by using data() to set a flag once a box is hovered etc :

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

I would simply store the ids of the yet hovered elements :

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