Отменить MouseLeave событие при наведении курсора мыши

Question

Я пытаюсь воспроизвести эффект на этой странице: http://blacknegative.com/#!/bullittagency/ (вы, возможно, придется красть справа, нажмите на кнопку «Меню» и выберите раздел 04, чтобы увидеть его)

Это что у меня есть до сих пор: http://codepen.io/semajtwin/pen/IcBxu

Проблема в том, что многократное перемещение мыши из одной коробки в другую событие mouseleave все еще запущено. Я пытаюсь найти способ отменить событие mouseleave на div, если мышь вернулась в 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