web-dev-qa-db-ja.com

jQuery setTimeout

このツールチップコードにタイムアウトを追加して、マウスをすぐにではなくしばらくしてからホバーした場合にのみ表示されるようにしたい... 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();
jquerysettimeout
8
user1002039

アニメーションを使用している場合は、 .delay() を使用してツールチップの外観を延期できます。

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

mouseout関数で、 .stop 既存の遅延またはアニメーションをキャンセルしてから、ツールチップを非表示にします。

$(mcTooltip).stop(true).hide('fast');
14
Alnitak
var my_timer;
$('.mcTxb').hover(
    function () {
        my_timer = setTimeout(function () {
            //do work here
        }, 500);
    },
    function () {
        clearTimeout(my_timer);
    }
);

これは、要素をmouseoverするとwhateverを実行する前に0.5秒待機し、半分以内にmouseoutを実行すると、whateverは発生しません。 2番目。

4
Jasper

1つのオプションは、 hoverIntent プラグインを使用して目的を達成することです。

2
user1106925

この質問は古いですが、私は他の人のために答えると思いました。タイムアウトが機能しなかった主な理由は、「setTimeOut」の場合でした。ラクダがアウト部分をこぶすることはできません。その「setTimeout」。

1
JSV
  1. 代わりにhover()を使用してください、それはより少ないコードです（そしてそれは常に良いです、IMO）。

そのようです：

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

setTimeoutは、マウスオーバーまたはホバーでは機能しません。 .delay（）を使用しても安全です。

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

// use this instead.

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