jQueryでonMouseoverとonMouseoutを同時に設定する（２）

Date:2008/06/28 11:54

jQueryメモ。ちょっとはまった。

（「＞」「＜」は実際はbackground-image画像）
【HTML】
<div id="togglebar">
＞<br>＞
</div>
<div id="tdmenu">
メニュー
</div>

【表示（イメージ）】
＞│メニュー│
＞│メニュー│

＞をクリックすると。。。
＜
＜
（「メニュー」非表示、「＞」を「＜」に変更）

というよう感じでページを作成し、以下の処理をjQueryで記述。
（１）togglebar をクリックすればtdmenuは非表示・表示切替
（２）togglebar をマウスオーバーで表示を変える
　＞の時は≫
　＜の時は≪

【（１）の表示切替処理】

$("#togglebar").click(function () {
	if($("#tdmenu").css("display")!="none"){
		$("#tdmenu").hide();
		$(this).css("background-image","url('./menutoggle/allowleft1.png')");
	}else{
		$("#tdmenu").show();
		$(this).css("background-image","url('./menutoggle/allowright1.png')");
	}
});

これだけなら、うまく処理された。

【（２）のマウスオーバー、アウト処理】

if($("#tdmenu").css("display")!="none"){
	$("#togglebar").hover(function(){
		$(this).css("background-image", "url('./menutoggle/allowright.png')");
	},
		function(){
		$(this).css("background-image", "url('./menutoggle/allowright1.png')");
	});
}else{
	$("#togglebar").hover(function(){
		$(this).css("background-image", "url('./menutoggle/allowleft.png')");
	},
		function(){
		$(this).css("background-image", "url('./menutoggle/allowleft1.png')");
	});
}

これを入れるとうまくいかない。
tdmenuが表示されているときは画像が切り替わるが、クリックしてtdmenuが表示されなくなっても、
「＞」が「＜」に変わらないし、hoverも「＞」が「≫」に変わるだけ。

tdmenu が display : none にも関わらず。
else 以下の処理になるはずだが、、、。

しかたないので、同じくjQueryのmouseoverとmouseoutを利用し、個別に記述。
【（２）の修正版】

$("#togglebar").mouseover(function(){
	if($("#tdmenu").css("display") == "none"){
		$("#togglebar").css("background-image", "url('./menutoggle/allowleft.png')");
	} else {
		$("#togglebar").css("background-image", "url('./menutoggle/allowright.png')");
	}
});

$("#togglebar").mouseout(function(){
	if($("#tdmenu").css("display") == "none"){
		$("#togglebar").css("background-image", "url('./menutoggle/allowleft1.png')");
	} else {
		$("#togglebar").css("background-image", "url('./menutoggle/allowright1.png')");
	}
});

これならすべて上手くいく。
なんでやろ…。