jQueryについて質問なのですが、ずっと調べているのですが答えが見つ

解決済

質問者：nekoze-man
質問日時：2010/07/24 20:53
回答数：1件

jQueryについて質問なのですが、ずっと調べているのですが答えが見つからずどうかお力を貸してください！

今ホームページを作っていまして、メニュー画面でギャラリーのボタンをクリックすると"animate"を使って横からスーッと写真が出てくるように作りました。しかしもう一度ギャラリーボタンを押すと更に横に動いてしまうため、"one"clickで一度だけ実行する処理にしました（これしかやり方が分からなかったので。。）

とりあえずここまではいいのですが、この時に例えばプロフィールボタンを押したときに今出ている写真を引っ込めてプロフィールを出すことは出来るのですが、またギャラリーボタンを押したときに"one"にしているため動きません。

そこでお聞きしたいのですが、この"one"を解除する方法などはあるのでしょうか？
もしくは他に何か良い方法あれば是非教えてもらいたいです。
色々調べて"bind"、"unbind"をうまく使うのかなと思って試行錯誤やってはいるのですがなかなかうまくいかず。。。

どうしても来週までに仕上げなくてはならなくて是非お力を貸してください！！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： steel_gray
回答日時：2010/07/25 09:34

自分でフラグとか設けて制御すればいいんじゃないかな。

以下のサンプルでは右に出しているliには'flag'が立っている。
（上位ULには現在出しているliのjQueryオブジェクトを'current'に記憶している）

<head>
<style type="text/css">
ul,li{
list-style-type:none;
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">
$(function(){
$('#Menu li').click(function(){
if($(this).data('flag')) return;
$(this).animate({marginLeft:'100px'},'slow');
$(this).data('flag',true);
if($(this).parent().data('current')) {
$(this).parent().data('current').animate({marginLeft:'0px'},'fast').data('flag',false);
}
$(this).parent().data('current',$(this));
});
});
</script>
</head>
<body>
<ul id="Menu">
<li>AAAA</li>
<li>BBB</li>
<li>CCCCC</li>
</ul>
</body>

この回答への補足

ご質問に答えてくださってありがとうございます！！
とりあえずギャラリーボタンを押した後の、更にまた押したときに動かないようになったのですが、その後の他のメニューボタンを押したときの解除がうまくいきません。
いまずっと色々とやっていたのですがなかなかうまくいかず。。

僕の場合liそれぞれにclassを振り分けているのですがそういう場合はどうすればよろしいのでしょうか？

このような感じで振り分けています。

<ul>
<li class="homebtn"><a href="#">home</a></li>
<li class="probtn"><a href="#">profile</a></li>
<li class="gallbtn"><a href="#">gallery</a></li>
<li class="blogbtn"><a href="#">blog</a></li>
</ul>

そしてsteel_gray様に教わったのをこのような感じでやってみたのですが。。

//ギャラリーBOX
$(function(){
$("#main_manu li.gallbtn").click(function(){
　if($(this).data('flag')) return;
　$("#gallery_manu_box li.ind_pho").show(0).animate({left: "+=820px"},1000);
　$("#gallery_manu_box li.ita_pho").show(0).animate({left: "+=1080px"},1200);
$(this).data('flag',true);

　if($(this).parent().data('current')) {
　　$("#gallery_manu_box li.ind_pho").hide(0).animate({left: "-=820px"},1000);
　　$("#gallery_manu_box li.ita_pho").hide(0).animate({left: "-=1080px"},1200);
$(this).data('flag',false);
　　　}
$(this).parent().data('current',$(this)); });
});

これではダメだろうなというはなんとなく見て理解できるのですが、全くほかのやり方が思いつきません。。。

それと、steel_gray様の書かれたサンプルの"this"と言うのは、"#Menu li"のことを指しているのでしょうか？
すみません質問ばかりで。。

やはりjavascriptをちゃんと勉強しなくてはダメですね。。

お時間あればお返事よろしくおねがいします！！