悬停后jQuery延迟不起作用

Question

I have problem with jQuery delay. I need to add a class after 5 seconds, so I wrote this:

Working example:

$('#category #product_list .ajax_block_product').on('mouseover',function(){
    var that = $(this);
    setTimeout(function(){
        that.find('.sl').show();
        that.find('.product_img_link img').hide();
        that.addClass('hovered');
    }, 500);
});

$('#category #product_list .ajax_block_product').on('mouseleave',function(){
    $(this).find('.sl').hide();
    $(this).find('.product_img_link img').show();
    $(this).removeClass('hovered');
}); 

It is working on the first time, but when I hover a second time, the hovered class is not added and I do not know why.

Can someone help me with this problem?

Answer 1

Try to use;

var tm;
$('#category #product_list .ajax_block_product').on('mouseover',function(){
    var that = $(this);
    tm = setTimeout(function(){
        that.find('.sl').show();
        that.find('.product_img_link img').hide();
        that.addClass('hovered');
    }, 500);
});

$('#category #product_list .ajax_block_product').on('mouseleave',function(){
    clearTimeout(tm);
    that.find('.sl').hide();
    that.find('.product_img_link img').show();
    that.removeClass('hovered');
}); 

Answer 2

You need to change the 500 to 5000, as mentioned in the comments. 100 = 100ms (millisecond), not 1 second. 1 second = 1000ms.