jquery addClass - wait, delay, speed, timeout или other

Question

Вопрос был опубликован несколько раз и заключается в том, как задержать addClass.

Я получил это:

$("#menu ul li").hover(function(){ 
    $(this).addClass("hover"); 
},function(){ 
    $(this).removeClass("hover"); 
}) 

И хочу что-то подобное, но когда класс добавляется после 500msek или около того. Лучший ответ до сих пор заключается в том, что он использует setimeout. Возможно, мне нужен только рабочий пример: How to wait 5 seconds with jQuery?

HooverIntent не будет работать, поскольку он должен быть addClass.

Br. Anders

ОБНОВЛЕНИЕ: Четыре замечательных ответа! Благодарю. Я не знаю, почему я не думал, что hoverIntent будет работать, его можно использовать, как видно из ответов. На самом деле все ответы могут использоваться каждый с плюсами и минусами. Я поеду с помощью hoverIntent, хотя должен быть включен другой плагин. Pro for the hoverIntent - это то, что может быть установлена ​​чувствительность, поэтому можно установить не только задержку для addClass, но она начнет отсчет сначала, когда мышь позиционируется, все еще перемещаясь по области (или не все так же, если чувствительность чувствительна)

Answer 1

Я не понимаю, почему hoverIntent не будет работать:

$("#menu ul li").hoverIntent({  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 200, // number = milliseconds for onMouseOver polling interval  
    timeout: 500, // number = milliseconds delay before onMouseOut  
    over:function(){ 
     $(this).addClass("hover"); 
    }, 
    out: function(){ 
     $(this).removeClass("hover"); 
    } 
}); 

Answer 2

$("#menu ul li").hover(function(){ 
    var $this = $(this); 
    var ovt = setTimeout(function(){$this.addClass('hover'); clearTimeout(ovt);}, 500); 
},function(){ 
    var $this = $(this); 
    var out = setTimeout(function(){$this.removeClass('hover'); clearTimeout(out);}, 500); 
}); 

Это то, что вы ищете?

Answer 3

Что-то вроде этого

$(function(){ 
    $("#menu ul li").hover(function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.addClass("hover"); 
     }, 1000) ; 
     },function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.removeClass("hover"); 
     }, 1000) ; 
    }) 
}); 

Answer 4

Оставляя SetTimeout и hoverintent в сторону (хотя они являются наиболее очевидными способами пойти), Не могли бы мы использовать для этого обратный вызов нулевой анимации?

$("#menu ul li").hover(function(){ 
    $(this).animate("",500,"",function(){$(this).addClass("hover")}; 
},function(){ 
    $(this).animate("",500,"",function(){$(this).removeClass("hover"); 
})