取消鼠標離開事件鼠標懸停

Question

我試圖複製此頁面上的效果：http://blacknegative.com/#!/bullittagency/（您可能需要向右滑動，點擊「菜單」，並選擇部分04看到它）

這是我到目前爲止：http://codepen.io/semajtwin/pen/IcBxu

問題是，重複將鼠標從一個框移動到另一個mouseleave事件仍然被解僱。我試圖找到一種方法來取消對div的mouseleave事件，如果鼠標回到div上。也許有更好的方法來做到這一點。

的jQuery：

$(document).ready(function() { 

    $('.item').mouseenter(function() { 
    $(this).css({ 
     'opacity': 0 
    }); 
    }).mouseleave(function() { 
    $(this).delay(300).animate({ 
     'opacity': 1 
    }, 500); 
    }); 
}); 

在此先感謝。

Answer 1

可以使用stop()功能停止在mouseleave事件創建動畫：

$(document).ready(function() { 

    $('.item').mouseenter(function() { 
    $(this).stop().css({ 
     'opacity': 0 
    }); 
    }).mouseleave(function() { 
    $(this).delay(300).animate({ 
     'opacity': 1 
    }, 500); 
    }); 
}); 

Working Demo