JQuery FadeIn / Out сбой

Question

Я новичок в jQuery и пытаюсь создать простую миниатюру fadeIn / fadeOut с текстом. Код прост, но когда я нахожу несколько раз быстро, он перестает отвечать.

(function(){
    $('.boxcaption').css({'display': 'none'})
    $('.boxgrid.captionfull').hover(function(){  
         $(".cover", this).stop().fadeIn(160);
    }, function() {  
        $(".cover", this).stop().fadeOut(160);
    }); 
})();

Answer 1

Проблема в том, что вы не используете параметры для stop ();что было бы true, true.

Документы jQuery объясняют это очень хорошо. .stop () документация

Я сделал скрипку, демонстрирующую это.

HoverFiddle

Удачи!

Answer 2

попытаться кэшировать объекты, $ (". Cover", this) - это означает, что jquery начинает поиск этого элемента при наведении курсора мыши;за этим селектором идет много кодирования;

Также попробуйте удалить .stop () из первой функции наведения

(function(){
    //save selectors in variables
    var l1 = $('some_selector'), l2= $('some_selector2');

    $('.boxcaption').css({'display': 'none'})
        l1.hover(function(){  
         $(".cover", this).fadeIn(160);
    }, function() {  
        l2.stop().fadeOut(160);
    }); 
})();

Answer 3

Как насчет добавления .show() и .hide()?

(function(){
    $('.boxcaption').css({'display': 'none'})
    $('.boxgrid.captionfull').hover(function(){  
         $(".cover", this).stop().hide().fadeIn(160);
    }, function() {  
        $(".cover", this).stop().show().fadeOut(160);
    }); 
})();

Или вы также можете сбросить свойство непрозрачности до:

(function(){
    $('.boxcaption').css({'display': 'none'})
    $('.boxgrid.captionfull').hover(function(){  
         $(".cover", this).stop().css("opacity","1").fadeIn(160);
    }, function() {  
        $(".cover", this).stop().css("opacity","0").fadeOut(160);
    });
})();