Помогите сделать задержку выделения меню

White_S

Постоялец
Регистрация
27 Май 2009
Сообщения
482
Реакции
102
Итак, есть кусок скрипта, который отвечает за присвоения активности пункту меню при наведении/
Код:
$('.menu_left>li ul.active').show();
$('.menu_left>li').on( 'mouseover', function() {
   
    $('.nav-img__item').attr("style", $(this).attr('data-img'));
    $('.menu_left>li ul').hide();
    $('.menu_left>li').removeClass('current-menu-item');
    $(this) .addClass('current-menu-item');
    $(this).find('ul').show();
   

});
Нужно чтобы класс current-menu-item присваивался с задержкой, пробовал так:
Код:
$('.menu_left>li ul.active').show();
$('.menu_left>li').on( 'mouseover', function() {
   setTimeout(function() {
   if($(this).is(":hover")){
    $('.nav-img__item').attr("style", $(this).attr('data-img'));
    $('.menu_left>li ul').hide();
    $('.menu_left>li').removeClass('current-menu-item');
    $(this) .addClass('current-menu-item');
    $(this).find('ul').show();
    };
    }, 3000); // время в мс

});
так:
Код:
$('.menu_left>li ul.active').show();
$('.menu_left>li').on( 'mouseover', function() {
   setTimeout(function() {
   
    $('.nav-img__item').attr("style", $(this).attr('data-img'));
    $('.menu_left>li ul').hide();
    $('.menu_left>li').removeClass('current-menu-item');
    $(this) .addClass('current-menu-item');
    $(this).find('ul').show();
   
    }, 3000); // время в мс

});
И так

Код:
$('.menu_left>li ul.active').show();
$('.menu_left>li').on( 'mouseover', function() {
   
    $('.nav-img__item').attr("style", $(this).attr('data-img'));
    $('.menu_left>li ul').hide();
    $('.menu_left>li').removeClass('current-menu-item');
    $(this).delay(3000) .addClass('current-menu-item');
    $(this).find('ul').show();
   

});
И чо-то не работает, почему?
 
Потому что ты используешь this в контексте колбека setTimeout'a.

Код:
$('.menu_left>li ul.active').show();
$('.menu_left>li').on( 'mouseover', function() {
    var self = this;
    setTimeout(function () {
        $('.nav-img__item').attr("style", $(self).attr('data-img'));
        $('.menu_left>li ul').hide();
        $('.menu_left>li').removeClass('current-menu-item');
        $(self).addClass('current-menu-item');
        $(self).find('ul').show();
    }, 3000);
});
 
Последнее редактирование:
Назад
Сверху