※ ChatGPTを利用し、要約された質問です(原文:jQuery hover時に遅延させる方法)
jQuery hover時にセンセーショナルな遅延処理を実現する方法
このQ&Aのポイント
jQueryを使用して要素(#hoge)からマウスを離したときにだけ遅延処理をさせる方法が分かりません。
現在のコードでは、要素(#hoge)にマウスが重なった時にはすぐに遅延処理が開始されるため、マウスを素早く移動した場合にも遅延処理が実行されてしまいます。
遅延処理を行うためには何か特別なコードを書く必要があるのでしょうか?
よろしくお願い致します。
jQueryを使用して以下のようなコードを書いております。
$('#hoge').hover(
function(){
$(this).animate({'marginTop':'100px'},500,'easeOutQuart');
},
function(){
$(this).animate({'marginTop':'0px'},500,'easeOutQuart');
}
);
上記のコードで問題なく動作するのですが、要素(#hoge)からマウスを離したときにだけ遅延処理をさせたいと思い、以下のようなコードを書いてみたのですが動作しません。
$('#hoge').hover(
function(){
$(this).animate({'marginTop':'100px'},500,'easeOutQuart');
},
function(){
setTimeout(function(){
$(this).animate({'marginTop':'0px'},500,'easeOutQuart');
},1000);
}
);
この場合、どのようなコードを記述すれば良いのでしょうか?
お礼
ご回答下さりありがとうございます。 思い通りの動作をさせることができました。 「setTimeout」を使うものだとずっと思っており、「delay」というものがあるのを知りませんでした…。 本当にありがとうございました。