3

要素に5秒以上ホバーするとdivを表示したいのですが、stackoverflowに投稿されたいくつかのソリューションを試しましたが、どれも機能していません。

これはタイムアウトなしのホバー機能です

$('div.avatar-with-data, .q-item-avatar').hover(function(){
        $(this).find('div.user-data').fadeIn('fast');
    },function(){
        $(this).find('div.user-data').fadeOut('fast');
    });

アップデート

答えはありませんが、変更すると

$(this).find('div.user-data').fadeIn('fast');

に

alert('shown');

その後、機能します（理由がわかりません。fadeInをshow（）に変更しようとしましたが、まだ運がありません）。しかし、私の上記のホバー機能はタイムアウトなしで機能します。

4

7 に答える 7

9

これを試して

var tOut;
$('div.avatar-with-data, .q-item-avatar').hover(function(){
    tOut = setTimeout(function(){
        $(this).find('div.user-data').fadeIn('fast');
    },5000);
},function(){
    clearTimeout(tOut);
    $(this).find('div.user-data').fadeOut('fast');
});
于 2013-02-12T13:48:58.503 に答える
3

比較的簡単なはずです。ホバリング時に 5 秒のタイムアウトを開始し、ホバリングを停止したらクリアする必要があります。

var hoverTimeout;

$('div.avatar-with-data, .q-item-avatar').hover(function() {
    hoverTimeout = setTimeout(function() {
        $(this).find('div.user-data').fadeIn('fast');
    }, 5000);
}, function() {
    clearTimeout(hoverTimeout);
    $(this).find('div.user-data').fadeOut('fast');
});
于 2013-02-12T13:49:23.747 に答える
3

hoverIntentを使用します。構文は本質的に hover と同じです。とても簡単で、いくつかのボーナスを追加して、まさにあなたが望むことを行います. HoverIntent は、実際にいつホバリングしているのか、なぜマウスが通過したのかを把握するという計画ホバーよりもはるかに優れた仕事をします。

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     interval: 5000, // number = milliseconds delay before trying to call over    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )

上記の hoverIntent リンクの最初のページから直接...

interval: マウス座標の読み取り/比較の間に hoverIntent が待機するミリ秒数。ユーザーのマウスが最初に要素に入ると、その座標が記録されます。"over" 関数を呼び出すことができる最も早いのは、1 回のポーリング間隔の後です。ポーリング間隔を高く設定すると、最初の「オーバー」コールが発生するまでの遅延が長くなりますが、次の比較ポイントまでの時間も長くなります。デフォルトの間隔: 100

于 2013-02-12T14:42:05.377 に答える
1

おそらく、Javascript Timeout 機能を使用しますか?

div を表示する関数のタイムアウトを 5000 (5 秒) に設定します。ホバーアウトするとタイムアウトがクリアされます。これをテストしていませんが、うまくいけば、さらに役立つでしょう...

var timeout;

$('div.avatar-with-data, .q-item-avatar').hover(function(){
        timeout=setTimeout(showTooltip,5000);    
    },function(){      
        hideTooltip();
    });

function showTooltip() {
   $(this).find('div.user-data').fadeIn('fast');
   clearTimeout(t);
}

function hideTooltip() {
   $(this).find('div.user-data').fadeOut('fast');
  clearTimeout(timeout);
}
于 2013-02-12T13:53:42.973 に答える
1

変数を保存して使用する必要がありますsetTimeout()。このようなものが動作するはずです:

var timer;

$('div.avatar-with-data, .q-item-avatar').hover(function() {  
    hovered = true;
    timer = window.setTimeout(function() {  
            $(this).find('div.user-data').fadeIn('fast');
    }, 5000);
}, function() {  
    window.clearTimeout(timer); 
    $(this).find('div.user-data').fadeOut('fast');
});
于 2013-02-12T13:49:33.757 に答える