マウスをのせてながら、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 回答日時： 2013/01/22 11:36

御提示のスクリプトだと、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様

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

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

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

お礼日時：2013/01/22 12:04