49

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

出来ますか？

スライドの私のコード:

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

9 に答える 9

75

これにより、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プラグインを確認する必要があります。

于 2009-07-06T21:16:08.183 に答える
1

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

于 2013-05-20T07:03:17.353 に答える
1 
$('.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) );  
   }
 });
于 2010-08-06T11:19:53.180 に答える
1

以下は、スライドのトリガーを 2 秒停止します。

$('.icon').hover(function() {
  $('li.icon > ul').delay(2000).slideDown('fast');
}, function() { 
  $('li.icon > ul').slideUp('fast');
});
于 2011-06-03T08:51:04.143 に答える
1

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

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

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

于 2009-07-06T21:18:22.547 に答える
0

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

    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'); 
            }  
        }  
    );  
});
于 2013-03-28T08:34:35.533 に答える
0

データ属性なしでこれを行うことができることをパオロ・ベルガンティーノに追加したいと思います。

var timer;
$('.icon').hover(function() {
    clearTimeout(timer);
    $('li.icon > ul').slideDown('fast');
}, function() {
    timer = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
});
于 2016-02-12T17:14:45.860 に答える