web-dev-qa-db-ja.com

delay（）またはstop（）によるタイムアウト？

_$('.file a').live('mouseenter', function() {
    $('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
    $('#download').stop(true, true).fadeOut('fast');
});
_

mouseenter関数にstop()と1秒の遅延を持たせたい。したがって、_#download_にカーソルを合わせると、fadeInは1秒遅れて開始するはずです。その間にマウスを外すと、fadeInが起動しません。ゲット？

私はそれを行う方法を本当に知りません、何かアイデアはありますか？

javascriptjqueryhoverdelay
20
matt

この場合、 setTimeout() がどのように機能するか（およびキャンセルできないため）、 .delay() を使用する必要があります。

_$('.file a').live('mouseenter', function() {
  $.data(this, 'timer', setTimeout(function() {
      $('#download').stop(true, true).fadeIn('fast');
  }, 1000));
}).live('mouseleave', function() {
  clearTimeout($.data(this, 'timer'));
  $('#download').stop(true, true).fadeOut('fast');
});
_

ここで試してみることができます 。

.delay() を使用すると、そのキューを以前にクリアしたかどうかに関係なく、要素の次のアニメーションがデキューされます。したがって、canキャンセルできるタイムアウトが必要です。これは、手動で setTimeout() を呼び出して上記で行います。結果を $.data() で保存し、後でクリアできるように clearTimeout() を使用します。

25
Nick Craver

同様の質問に対する答えを探していましたが、.animate（）を使用してこれを処理できることがわかり、.stop（）に従います。

次のようになります。

$('.file a').live('mouseenter', function() {
    $('#download')
        .stop(true, true)
        .animate({opacity:0}, 1000);            // one second delay
        .animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
    $('#download')
        .stop(true, true)
        .animate({opacity:0}, 'slow', 'swing');
});
4
user1417594

SetTimeout関数を使用する

$('.file a').live('mouseenter', function() {
setTimeout(function(){
    $('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
    $('#download').stop(true, true).fadeOut('fast');
});

setTimeoutは、指定されたミリ秒（この場合は1000）後に関数内のコードを実行します。

3
sTodorov

delayイベントを使用せずにjqueryでこれを使用できます。

$('.file a').hover(function() {
  time = setTimeout(function() {
     $('#download').fadeIn();
  },1000);
},function(){
    clearTimeout(time);
});

1000は、その後$（ '＃download'）がフェードインする時間です。

0
M Rostami