Only execute function if mouse has hovered for more than 1 second

Question

I would like to add and remove classes on elements when a user hovers over an element, but only if their cursor has been on it for more than 1 second for example. How can I achieve this?

$("#thumbs div").mouseenter(function() {
    $('#thumbs div').removeClass('hovered');
    $(this).addClass('hovered');
});

Answer 1

Use a timer:

var timer;
$("#thumbs div").mouseenter(function() {
    var that = this;
    timer = setTimeout(function(){
        $('#thumbs div').removeClass('hovered');
        $(that).addClass('hovered');
    }, 1000);
}).mouseleave(function() {
    clearTimeout(timer);
});

http://jsfiddle.net/qGRcH/