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()を使用することができます、あなたのmouseout機能で

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

を既存の遅延やアニメーションをキャンセルする.stopを使用して、ツールチップを隠します：

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

Answer 2

一つのオプションは、あなたが望むものを達成するためにhoverIntentプラグインを使用することです。

Answer 3

1. 使用hover()ではなく、それはより少ないコードだ（それは、IMOは常に良いことです）。そのよう

：

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

これはどんなときにmouseover要素とあなたmouseout場合は0.5秒以内に発生しませんどんなを行う前に半秒をお待ちしております。

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');