jQuery mouseover with timing

Question

마우스가 요소에서 1 초 동안 마우스를 가져간 후에 만 ​​mouseover 이벤트를 트리거하는 방법이 있습니까?

$("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] 참조)을 만들 수 있습니다. 그 함수를 배열에 저장하거나 "window"에 직접 저장할 수 있습니다. 타이머 함수가 트리거되기 전에 "mouseout"이 발생하면 취소 할 수 있습니다.

[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); 
     } 

    }; 
}());​