jQuery mouseover с синхронизацией

Question

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

$("img").mouseover(function() { 

$(this).animate({opacity:1}, 200); 

}); 

Answer 1

$("img").mouseover(function() { 
    $(this).delay(1000).animate({opacity:1}, 200); 
}).mouseleave(function() { 
    $(this).clearQueue().stop().animate({opacity:0.2},200); 
});​ 

DEMO

Answer 2

Вы можете использовать плагин hoverIntent() JQuery найти здесь: http://cherne.net/brian/resources/jquery.hoverIntent.html

Кроме того, убедитесь, что вы будьте осторожны при использовании этих видов вещей, как они не работают на мобильных браузерах или что-нибудь с помощью прикосновения экран.

Answer 3

Вы должны использовать функцию setTimeOut.

setTimeOut(function(){$("img").mouseover(function() { 

     $(this).animate({opacity:1}, 200); 

}); 
},1000); 

Требуется время в миллисекундах.

Answer 4

вы можете создать функцию таймера (см. [1]), которая обрабатывает ваше событие спустя 1 секунду. Вы можете сохранить эту функцию в массиве или непосредственно в «окне», чтобы она могла быть отменена, если «выключение мыши» происходит до срабатывания функции таймера.

[1] http://www.w3schools.com/js/js_timing.asp

Answer 5

http://jsfiddle.net/tqa2J/1/

$("img").on("mouseover mouseout", function() { 
    var tid = 0; 
    return function(e) { 
     var elem = $(this); 
     clearTimeout(tid); 
     if (e.type == "mouseover") { 
      tid = setTimeout(function() { 
       elem.stop(true).animate({ 
        opacity: 1 
       }, 200); 
      }, 1000); 
     } 
     else { 
      console.log(elem); 
      elem.stop(true).animate({ 
       opacity: 0.3 
      }, 200); 
     } 

    }; 
}());​