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

[White_S]

Итак, есть кусок скрипта, который отвечает за присвоения активности пункту меню при наведении/

$('.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();
   

});

И чо-то не работает, почему?

 

[grave_bird]

Потому что ты используешь 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);
});