web-dev-qa-db-ja.com

jQueryで.delay（）を.animate（）と一緒に使用できますか？

このコードは、作業中のWebサイトでバスケットプレビューを開くスライドです。ユーザーがその上にホバーされた場合は開いたままですが、ホバーのコールバックがトリガーされるまでに2秒の遅延が必要です。これは、ユーザーがマウスをバスケット領域から出させたくない場合のためです。

以下は、バスケットをアニメーション化するために使用しているコードです。

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").stop().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').stop().animate({top: -cartHeight},{duration:500})
});

私が使用しようとしたが、影響はなかったコードは次のとおりです。

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").delay().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').delay().animate({top: -cartHeight},{duration:500})
});
jqueryjquery-animatedelay
17
Henryz

コアsetTimeoutおよびclearTimeout js関数を使用して、この種のことを常に管理しています。

jsFiddleの例

jquery.hoverIntentプラグイン もご覧ください。ホバーイベントとアウトイベントでタイムアウトが発生します

3
gpasci

遅延の前にストップを追加すると、うまく機能します。

$('.cart_button, .cart_module').hover(function() {
    $('.cart_module').stop(true, true).delay(100).animate({top:'39px'}, 400);
  },
  function() {
    $('.cart_module').stop(true, true).animate({top: -cartHeight}, 250);
});
26
Chango

2011年以降、この方法でjQueryの更新が行われたようです。Chromeでは、このタイムアウトコールを使用できます。

$('.thing').hover(function(){
    $(".thing").delay(2000).animate({top:'39px'},{duration:500});
}
7
cbmtrx

どのくらい遅延させますか????

$('.cart_button, .cart_module').hover(function(){
            $(".cart_module").delay(2000).animate({top:'39px'},{duration:500}); //two seconds
        }, function(){
            $('.cart_module').delay(2000).animate({top: -cartHeight},{duration:500}) //two seconds 
    });
0
switz