0

ユーザーがアイテムにカーソルを合わせると、jqueryが引き継いでアイテムを表示する何かを達成しようとしています(ただし、数秒後)。次の HTML がリストされています。

<ul id="ulPersonal">
      <li class="break eTime">
        <p>Manage your time card.</p>
        <div id="dEtime">
          some content
        </div>
       </li>
</ul>

li アイテムが表示mouseenterされ、そこに入ると、示されているように divdEtimeが表示されます (ここに jquery があります)。

        $('#dEtime').hide();
        $(".eTime").mouseenter(function () {
            $('#dEtime').fadeIn('slow');
        });

これはうまく機能します..ユーザーがliアイテムの上にカーソルを置くと、divがフェードインします.ただし、これが発生するまでに約2〜3秒待ちたい. つまり、ユーザーがliの上にカーソルを合わせることができます.2秒以上ホバリングしている場合にのみ、待機してから開く必要があります. それらが2秒前に「ホバーを外す」場合、divは表示されません。

それが理にかなっていることを願っています。基本的にホバーを許可しますが、2 秒経過したら div のみを表示します。それ以外の場合は表示しないでください。これを行う必要がある多くの div がありますが、今のところシンプルに保つことを望んでいました。

4

4 に答える 4

1

hover+で試してくださいsetTimeout

var id;
$('#dEtime').hide();
$(".eTime").hover(
    function () {
        id = setTimeout(function(){
            $('#dEtime').fadeIn('slow');
        }, 2000)
    },
    function() {
        if (id != null) {
            clearInterval(id);
        }        
        $('#dEtime').fadeOut('slow');
    }
);

デモ

于 2013-05-08T18:29:54.610 に答える
1

使用する.delay()

$('#dEtime').delay(2000).fadeIn('slow');

そのようなフェードアウトでもマウスリーブを追加します：

$(".eTime").mouseleave(function(){
    $('#dEtime').stop(true,true).fadeOut('slow')
});

ここにフィドルがあります：http://jsfiddle.net/r3XJE/2/

.hover()次のような短いコードを使用することをお勧めします。

$('#dEtime').hide();
$(".eTime").hover(function () {
    $('#dEtime').delay(2000).fadeIn('slow');
},
function(){
    $('#dEtime').stop(true,true).fadeOut('slow')
});

フィドル: http://jsfiddle.net/r3XJE/1/

于 2013-05-08T18:25:09.803 に答える
0

これを使ってみてください

$('#dEtime').hide();
$(".eTime").mouseenter(function () {
$('#dEtime').delay(3000).fadeIn('slow');
});
$(".eTime").mouseleave(function () {
$('#dEtime').fadeOut('slow');
});
于 2013-05-08T18:29:15.627 に答える