web-dev-qa-db-ja.com

.hover（）に待機するように指示するには？

ドロップダウンメニューがあります。複数のレベルにスライドダウンしたら、2秒ほど待機時間を追加してから、ユーザーが誤って.hover()を壊してしまった場合に、それが消えるまで待機するようにします。

出来ますか？

スライドの私のコード：

$('.icon').hover(function() {
        $('li.icon > ul').slideDown('fast');
    }, function() { 
        $('li.icon > ul').slideUp('fast');
    });
javascriptjquerytimehoversettimeout
49
Michal

これにより、2番目の関数は実行前に2秒（2000ミリ秒）待機します。

$('.icon').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li.icon > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
    $(this).data('timeout', t);
});

また、クレイジーな動作を避けるために、ユーザーが戻ったときにタイムアウトをクリアします。

ただし、これは非常にエレガントな方法ではありません。この特定の問題を解決するために設計された hoverIntent プラグインをチェックアウトする必要があります。

75
Paolo Bergantino

個人的には、「hoverIntent」プラグインが好きです。

http://cherne.net/brian/resources/jquery.hoverIntent.html

ページから：hoverIntentは、ユーザーの意図を決定しようとするプラグインです...水晶玉のように、マウスの動きだけで！これは、jQueryの組み込みホバーのように機能します（派生しました）。ただし、onMouseOver関数をすぐに呼び出す代わりに、ユーザーのマウスが十分に遅くなるまで待機してから呼び出しを行います。

どうして？アニメーションまたはajax呼び出しの偶発的な起動を遅延または防止するため。単純なタイムアウトは小さな領域で機能しますが、ターゲット領域が大きい場合、意図に関係なく実行されます。

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

構成オプション

sensitivity：マウスがポーリング間隔の間、このピクセル数よりも少ない距離を移動する場合、「over」関数が呼び出されます。最小感度しきい値が1の場合、マウスはポーリング間隔の間を移動してはなりません。感度のしきい値が高いと、誤検知が発生しやすくなります。デフォルトの感度：7

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

over：必須。 onMouseOverを呼び出す関数。関数は、jQueryのhoverメソッドから受け取るのと同じ「this」および「event」オブジェクトを受け取ります。

timeout：「out」関数が呼び出されるまでのミリ秒単位の単純な遅延。タイムアウトの期限が切れる前にユーザーが要素の上にマウスを戻すと、「out」関数は呼び出されません（「over」関数も呼び出されません）。これは主に、ユーザーを一時的に（そして意図せずに）ターゲット要素から離して...戻る時間を与える、ずさんな/人間のマウスの軌跡から保護するためです。デフォルトのタイムアウト：0

out：必須。 onMouseOutを呼び出したい関数。関数は、jQueryのhoverメソッドから受け取るのと同じ「this」および「event」オブジェクトを受け取ります。同じ実行で「over」関数が呼び出された場合にのみ、hoverIntentは「out」関数を呼び出します。

42
daniellmb
$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){
   var $this = $(this);
   if (e.type === 'mouseenter') {
       clearTimeout( $this.data('timeout') );
       $this.slideDown('fast');
   }else{ // is mouseleave:
       $this.data( 'timeout', setTimeout(function(){
           $this.slideUp('fast');
       },2000) );  
   }
 });
1
gustav

次の例では、スライドのトリガーが2秒停止します。

$('.icon').hover(function() {
  $('li.icon > ul').delay(2000).slideDown('fast');
}, function() { 
  $('li.icon > ul').slideUp('fast');
});
1
Steph

または、単純にtransition：all 2sのイーズインアウトを使用することもできます。異なるブラウザに-webkit、-moz、および-oを必ず追加してください。

1
yklee1013

一般的な考え方は、次のようにsetTimeoutを使用することです。

$('.icon').hover(function() {
           $('li.icon > ul').slideDown('fast');
    }, function() { 
           setTimeout(function() {
                $('li.icon > ul').slideUp('fast');
           }, 2000);
    });

しかし、これは、ユーザーがマウスアウトしてからすぐに再びマウスを入れると直観に反することがあります。これは、ユーザーが再びマウスをホバーしたときにタイムアウトをクリアすることを考慮していません。それには追加の状態が必要です。

1
John Calsbeek

Paolo Bergantinoに、データ属性なしでこれを実行できることを追加したいと思います。

var timer;
$('.icon').hover(function() {
    clearTimeout(timer);
    $('li.icon > ul').slideDown('fast');
}, function() {
    timer = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
});
0
Adam

これはあなたの必要なコードだと思います：

    jQuery( document ).ready( function($) {  
    var navTimers = [];  
    $('.icon').hover(function() { 
            var id = jQuery.data( this );  
            var $this = $( this );  
            navTimers[id] = setTimeout( function() {  
                $this.children( 'ul' ).slideDown('fast');  
                navTimers[id] = "";  
            }, 300 );  
        },  
        function () {  
            var id = jQuery.data( this );  
            if ( navTimers[id] != "" ) {  
                clearTimeout( navTimers[id] );  
            } else {  
                $( this ).children( "ul" ).slideUp('fast'); 
            }  
        }  
    );  
});
0
Sakata Gintoki
var timer;

var delay = 200;

$('#hoverelement').hover(function() {

    on mouse hover, start a timeout

    timer = setTimeout(function() {

       Do your stuff here 

    }, delay);

}, function() {

   Do mouse leaving function stuff here    

    clearTimeout(timer);
});

//編集：コードを挿入

0
Hadnazzar