jQuery setTimeout

Question

나는이 툴팁 코드에 타임 아웃을 추가하고 싶습니다. 마우스가 잠시 후 그 위에 오면 바로 표시됩니다 ... setTimeout()을 추가하려고 시도했지만 사용 방법을 알 수 없었습니다 clearTimeout()이므로 도구 설명이 마우스 아웃시 숨겨지지 않습니다. 도울 수 있니?

// ----------------------------------------------- 
// TOOLTIP MOUSE HOVER 
// ----------------------------------------------- 
function mcTooltip() { 
    $('.mcTxb').mousemove(function(e) { 
     var mcHoverText = $(this).attr('alt'); 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).text(mcHoverText).show('fast'); 
     $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); 
    }).mouseout(function() { 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).hide('fast'); 
    }); 
} 
mcTooltip(); 

나는이 시도 :

// ----------------------------------------------- 
// TOOLTIP MOUSE HOVER 
// ----------------------------------------------- 
function mcTooltip() { 
    $('.mcTxb').mousemove(function(e) { 
     var mcHoverText = $(this).attr('alt'); 
     var mcTooltip = $('.mcTooltip'); 
     setTimeOut(function(){ 
      $(mcTooltip).text(mcHoverText).show('fast'); 
     }, 300); 
     $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); 
    }).mouseout(function() { 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).hide('fast'); 
    }); 
} 
mcTooltip(); 

Answer 1

, 당신은 당신의 툴팁의 모양 연기 .delay()를 사용할 수 있습니다 기존의 지연이나 애니메이션을 취소 .stop를 사용하십시오 mouseout 함수에서

$(mcTooltip).text(mcHoverText).delay(1000).show('fast'); 

을하고 툴팁을 숨기 :

$(mcTooltip).stop(true).hide('fast'); 

Answer 2

하나의 옵션은 당신이 원하는 것을 달성하기 hoverIntent 플러그인을 사용하는 것입니다. 당신이 애니메이션을 사용하고있는 것처럼

Answer 3

1. 사용 hover()는 대신, 적은 코드 (그리고 즉, IMO 항상 좋은).

과 같이 : 당신 mouseover 요소와 이가 발생하지 않습니다 어떤 경우

function mcToolTip() { 
    $(".mcTxb").hover(function(){ 
     // mouseover stuff here 
     $("element").delay(3000).show(); // 3 second delay, then show 
    }, function(){ 
     // mouseout stuff here 
    }); 
} 

Answer 4

var my_timer; 
$('.mcTxb').hover(
    function() { 
     my_timer = setTimeout(function() { 
      //do work here 
     }, 500); 
    }, 
    function() { 
     clearTimeout(my_timer); 
    } 
); 

이것은 어떤을하기 전에 0.5 초를 기다리는 경우 반 내에서 mouseout초 .

Answer 5

이 질문은 오래되었지만 나는 다른 사람들을 위해 대답했다고 생각했습니다. 타임 아웃이 작동하지 않는 주된 이유는 "setTimeOut"의 경우입니다. 낙타는 밖으로 나올 수 없습니다. 그것의 "setTimeout".

Answer 6

setTimeout은 마우스 오버 또는 마우스 오버시 작동하지 않습니다. .delay()를 사용하는 것이 안전합니다.

setTimeout(function(){ 
    $(mcTooltip).text(mcHoverText).show('fast'); 
}, 300); 

// use this instead. 

$(mcTooltip).text(mcHoverText).delay(3000).show('fast');