jQuery - ссылка работает * только * через некоторое время

Question

У меня есть ссылка:

<a href="#" id="link">Here's my link</a>

Это не обычная кликабельная ссылка, она закодирована в jQuery так:

 $("#link").hover(function(e) { 
    e.preventDefault();   
    $("#tv").stop().animate({marginLeft: "50px"});
    $("#tv img)").animate({opacity: 1});
})  

Таким образом, после наведения неприкасаемой ссылки происходит изменение поля и непрозрачности # tv.

Есть ли способ заставить эту работу работать только после , когда пользователь наводит область ссылки с указателем на больше , чем на две секунды?

Потому что теперь все происходит в реальном времени.

Я знаю, что есть delay(), но он не работает, потому что он просто задерживает анимацию, и в этом случае я не хочу любое действие, если указатель закончен менее чем на две секунды.

Можно без петли?

Answer 1

То, что вы ищете, называется hoverIntent .

Answer 2

Вам просто нужно a setTimeout() для задержки кода, а также a clearTimeout(), чтобы очистить его, если пользователь покинет ссылку в течение 2 секунд.

Пример: http://jsfiddle.net/mNWEq/2/

$("#link").hover(function(e) {
    e.preventDefault();
    $.data(this).timeout = setTimeout(function() {
        $("#tv").stop().animate({marginLeft: "50px"});
        $("#tv img)").animate({opacity: 1});
    }, 2000);
}, function(e) {
    clearTimeout($.data(this,'timeout'));
});

Answer 3

var animateTimeout;

$("#link").hover(function() {
  if (animateTimeout != null) { 
    clearTimeout(animateTimeout); 
  }
  animateTimeout = setTimeout(animate, 2000);
}, function() {
  clearTimeout(animateTimeout);
});

function animate() {
  //do animation
}