1

При наведении на div c меню, фон вокруг затемняется, но если проводить так много раз, mouseenter & mouseleave из дива, начинает моргать. Решил установить setTimeout, получилось так:

$(".subcat > ul").hover(function(){
    var time_id = setTimeout(function () {
        $(".subcat").css({ zIndex: 15 });
        $(".subcat_overlay").fadeIn();
    }, 1000);       
}, function(){
        $(".subcat").css({ zIndex: 1 });
        $(".subcat_overlay").fadeOut();
});

Проблема сейчас в том, что нужна переменная, очищающая время, clearTimeout(time_id); Но куда её воткнуть, я что-то не понимаю.

1
  • 1
    Можно сделать переменную time_id глобальной (вынести за пределы функции), после чего спокойно делать clearTimeout(time_id); перед setTimeout.
    – Regent
    24 июл 2018 в 9:58

3 ответа 3

2

Как подсказал @Regent, Вам следует вынести ссылку на таймер в глобальное пространство, чтобы можно было обращаться к нему после окончания блока кода. А перед созданием нового таймера проверяйте наличие ранее созданных экземпляров – в этом случае удаляйте их.

var time_id = null;

$(".subcat > ul").hover(function(){
    if (time_id) {
        clearTimeout(time_id);
    }
    // убран var – иначе будет создаваться локальная переменная 
    time_id = setTimeout(function () {
        $(".subcat").css({ zIndex: 15 });
        $(".subcat_overlay").fadeIn();
    }, 1000);       
}, function() {
        $(".subcat").css({ zIndex: 1 });
        $(".subcat_overlay").fadeOut();
});
2

Fade-функциии ставятся в очередь, не прервывая предыдущих. Решение - stop

$(".subcat_overlay").stop().fadeIn()
$(".subcat_overlay").stop().fadeOut()

Либо вообще без таймаутов

$(".subcat_overlay").stop().fadeOut().delay(1000).fadeIn()
0

Вы можете написать в стиле

.subcat_overlay{
    opacity: 0;
    transition: all .5s ease;
}

.subcat_overlay_hover{
    opacity: 1;
}

И в JS

$(".subcat > ul").hover(function(){
    $(".subcat").css({ zIndex: 15 });
    $(".subcat_overlay").addClass('.subcat_overlay_hover');       
}, function(){
    $(".subcat").css({ zIndex: 1 });
    $(".subcat_overlay").removeClass('.subcat_overlay_hover');
});

Или же так (не уверен, что будет работать. Сделал увидев комментарий)

var time_id;
$(".subcat > ul").hover(function(){
    clearTimeout(time_id);
    time_id = setTimeout(function () {
        $(".subcat").css({ zIndex: 15 });
        $(".subcat_overlay").fadeIn();
    }, 1000);       
}, function(){
    $(".subcat").css({ zIndex: 1 });
    $(".subcat_overlay").fadeOut();
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.