jQuery クリックした後の動き

ボタン(#btn)をクリックすると、#navWarpを右に200px
移動するところまでは出来ましたが、２度目のクリックで元の位置まで
戻すにはどのような方法があるのでしょうか。

宜しくお願いします。

■jquery
$(function(){

$("#btn").click(function(){
$("#navWarp").stop().animate({"left":"200px"},500);
});

});

■css
#navWarp{
position:relative;
margin:0 0 0 -200px;
}

#btn{
position:absolute;
top:0;
left:200px;
cursor: pointer;
}

■html
<div id="navWarp">
<div id="btn"></div>
</div>

No.1 ベストアンサー 回答者： DoubtOwl 回答日時： 2014/01/17 12:55

こんなかんじですかね

$("#btn").click(function(){
if($("#navWarp").css("left") === "200px"){
$("#navWarp").stop().animate({"left":"0px"},500);
}
else{
$("#navWarp").stop().animate({"left":"200px"},500);
}
});

この回答へのお礼

DoubtOwl様

if文でやるのですね。
こんなにシンプルで出来るとは・・・。
ありがとうございました。

お礼日時：2014/01/18 09:35