0

すべての要素が「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();
    }
});

したがって、現在、マウスが各要素を離れると、すべての要素を離れるのではなく、アニメーションが実行されます。

誰かが洞察を提供できるなら、どうもありがとう！

4

2 に答える 2

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(); 
           }
    });
})();
于 2013-06-25T18:40:22.710 に答える
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();
});

フィドル

于 2013-06-25T18:42:06.600 に答える