1

マウスが特定のリンク上を移動すると起動するドロップダウンメニューがあります。マウスが特定の期間ドロップダウンから離れている場合、そのドロップダウンメニューをフェードアウトさせたいですか？

出来ますか？

これは、ドロップダウンメニューを開くための私のjQueryです。

$('.cartpopup').css({'display':'none'});
$('.cart-link').bind('mouseenter',function(){
    $('.cartpopup').stop(true, true).show().animate({top: 100}, 200).animate({top: 44}, 500);
});

ここで、ポップアップが非アクティブである場合、たとえばマウスが一定時間上にない場合に、ポップアップを自動的に閉じるにはどうすればよいですか。

4

1 に答える 1

3

を使用してタイマーを設定するsetTimeout()と、値が返され、後でそのタイムアウトをキャンセルするために使用できます。

たとえば、次の場合：

var hideTimer = null;
$('.cartpopup').bind('mouseleave', function() {
    hideTimer = setTimeout(function() {
        // Code to hide menu goes here
    }, 1000);
});

次に、マウスがアイテムに再び入ると、次のようにタイマーをキャンセルできます。

$('.cartpopup').bind('mouseenter', function() {
    if (hideTimer !== null) {
        clearTimeout(hideTimer);
    }
});

このように、タイマーが実行される前にマウスがアイテムに再度入ると、アイテムは表示されたままになります。

于 2012-08-20T16:16:32.233 に答える