Неоднократное наведение на изображение заставляет "мышиный центр" записывать каждое наведение и постоянно исчезает и исчезает.

Question

У меня есть этот простой код, настроенный так, чтобы, когда я mouseenter изображение, изображение исчезает, и некоторая текстовая информация исчезает. Моя проблема в том, что когда я очень быстро наводю курсор на изображение назад и вперед, он записывает каждый mouseenter и постоянно исчезает и исчезает столько раз, сколько моя мышь зависла над изображением. Есть ли способ остановить это поведение?

$('article').mouseenter(function(e) {
    $(this).children('img').fadeTo(500, 0.4);
    $(this).children('.post-info').fadeIn(500);
}).mouseleave(function(e) {
    $(this).children('img').fadeTo(500, 1);
    $(this).children('.post-info').fadeOut(500);
});

Answer 1

.stop() - это решение

Проще говоря, вы просто добавляете .stop() перед каждой исчезающей анимацией.

демоверсия jsfiddle

$('article').mouseenter(function(e) {
    $(this).children('img').stop().fadeTo(500, 0.4);
    $(this).children('.post-info').stop().fadeIn(500);
}).mouseleave(function(e) {
    $(this).children('img').stop().fadeTo(500, 1);
    $(this).children('.post-info').stop().fadeOut(500);
});

В качестве бонуса. Вот как бы я написал этот код:

демоверсия jsfiddle

$('article').on("mouseenter mouseleave", function( e ) {

        // mouseenter variable returns true if mouseenter event is occurring 
        // and it returns false if event is anything but mouseenter.
    var mouseenter = e.type === "mouseenter",
        $this = $(this),
        img = $this.children('img'),
        postInfo = $this.children('.post-info');

        // Both of these use ternary if statements that are equal to:
        // if ( mouseenter ) { var imgFade = 0.4; } else { var imgFade = 1; }
        // if ( mouseenter ) { var postInfoFade = 'fadeIn'; } else { var postInfoFade = 'fadeOut'; }
    var imgFade = mouseenter ? 0.4 : 1,
        postInfoFade = mouseenter ? 'fadeIn' : 'fadeOut';

    img.stop().fadeTo( 500, imgFade );
    postInfo.stop()[ postInfoFade ]( 500 );

});