このコードは、作業中の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})
});
コアsetTimeout
およびclearTimeout
js関数を使用して、この種のことを常に管理しています。
jquery.hoverIntentプラグイン もご覧ください。ホバーイベントとアウトイベントでタイムアウトが発生します
遅延の前にストップを追加すると、うまく機能します。
$('.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);
});
2011年以降、この方法でjQueryの更新が行われたようです。Chromeでは、このタイムアウトコールを使用できます。
$('.thing').hover(function(){
$(".thing").delay(2000).animate({top:'39px'},{duration:500});
}
どのくらい遅延させますか????
$('.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
});