jQueryのアニメーションについて

質問

jQueryのアニメーションについて聞きたいです。

チェックボックスと連動してボックスが表示されるアニメーションはわかりましたが、表示される際のアニメーションはどうすればいいかわかりません。

フロートで横並びになった一番・二番・三番の三つのボックスがあり、三番のみが表示されている場合、三番のボックスが一番左に表示されています。

そこで二番のチェックボックスにチェックをして、二番のボックスを表示ると、二番が左で三番がその右に表示されます。

その際、三番が右にずれるときにアニメーションでスライドできないでしょうか。

現在のソースです。

【CSS/Script】

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
input{margin:80px 0 0 80px;}
div{
display:none;
margin:25px;
padding:25px;
background:#eee;
width:200px;
height:150px;
float:left;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('#check1').click(function() {
$("#box1").slideToggle(this.checked);
});
$('#check2').click(function() {
$("#box2").slideToggle(this.checked);
});
$('#check3').click(function() {
$("#box3").slideToggle(this.checked);
});
});
</script>

【HTML】

<p>
<label><input type="checkbox" id="check1">一番</label>
<label><input type="checkbox" id="check2">二番</label>
<label><input type="checkbox" id="check3">三番</label>
</p>
<div id="box1">一番を押してでるのです</div>
<div id="box2">さては二番を押したから</div>
<div id="box3">どれかと思えば三番でした</div>

よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

jQueryはあまり知りませんが、

＞slideToggle(this.checked);
は
slideToggle([speed], [callback])
という構文だと思いますので、this.checkedは意味がないのではないでしょうか？

http://api.jquery.com/slideToggle/

とりあえず、この部分を
toggle(500);
などにしてあげると縦横ともスライドしますので、ご質問の内容にほぼ近くなるかと思います。

横にスライドしてから縦にスライドするなどのように順序をつけたいといった場合は、用意されているメソッド一つでは単純にはできないので、
animate()
などを利用して制御してください。

あと、ご質問とは関係ありませんが…
同じ動作をするものに対して個別に処理を一つずつ記述するよりも、まとめて記述しておいた方が、数が増減した時にスクリプトを修正する必要がなくなります。（ご提示の例で3個のチェックボックスが5個になるなど）
また、それぞれの要素にidをつけなくても良くなるというメリットもあります。

お礼

ありがとうございます！！
見よう見まねでやってみたのですが、やっぱりもう少し勉強しなければならないですね。

fujillinさんのおかげで、考えていた挙動になりました。
まとめての記述も勉強したいと思います。