マウスをのせてながら、2秒後にフェイドインしたい

質問

すみません、jquery初心者です。

下記の様にコードを書きました。
マウスをのせてから、2秒後にフェイドインはしたのですが、
一瞬だけマウスをのせてもフェイドインしてしまいます。

$(function(){
$("div#aaa").hide();
$("div#bbb a").mouseover(function(){
setTimeout( function () {
$("div#aaa").fadeIn(1500);
} , 2000 );
});
try { clearTimeout(); } catch ( e ) {}
});

マウスをのせてながら、2秒後にフェイドインさせる場合は
どのように書けば良いのでしょうか？
ご教授頂けると助かります。

何卒、よろしくお願いします。

回答No.1

fujillin · ベストアンサー

御提示のスクリプトだと、mouseoverしたら必ず2秒後に表示するというふうになります。

＞一瞬だけマウスをのせてもフェイドインしてしまいます。
一瞬でもマウスがはずれたら表示しないのか、2秒後にマウスがそこにあれば一度はずれていても表示するのかなどによって考え方が変わると思いますが、前者ならマウスがはずれたらTimeoutの処理を中止すればよさそう。後者ならば2秒後の処理の際にマウスが対象の上にあれば表示、なければ処理しないというふうにするとか…

ご参考までに…
（全角空白は半角に）

＜前者の場合＞
$(function(){
　$("div#aaa").hide();
　var timerId;
　$("div#bbb a").mouseover(function(){
　　timerId = setTimeout(function(){
　　　$("div#aaa").fadeIn(1500);
　　}, 2000 );
　}).mouseout(function(){
　　clearTimeout(timerId);
　});
});

＜後者の場合＞
$(function(){
　$("div#aaa").hide();
　var flag;
　$("div#bbb a").mouseover(function(){
　　flag = true;
　　setTimeout(function(){
　　　if(flag) $("div#aaa").fadeIn(1500);
　　}, 2000 );
　}).mouseout(function(){ flag = false; });
});

お礼

fujillin様

ご回答有難う御座います。

説明不足で申し訳ございません。
前者の方です。

大変助かりました！
本当に有難う御座いました。