jqueryで順番に実行する方法

質問

jqueryについて教えてください。
画像を順番に表示するにはどうすればよいのでしょうか？
下記のようにやるとすべての画像が同時にフェードイン、フェードアウトします。

setInterval(function() {
$("#i1").fadeIn(3000).fadeOut(3000);
$("#i2").fadeIn(3000).fadeOut(3000);
$("#i3").fadeIn(3000).fadeOut(3000);
$("#i4").fadeIn(3000).fadeOut(3000);
$("#i5").fadeIn(3000).fadeOut(3000);
}, 6000);

同時にではなく、順番（１を表示した後に２というように）に表示するにはどうすればよいのでしょうか？

回答No.3

noname#87714

========
function serialFadeInOut(list,time){
function _func(i){
if( typeof list[i] !== 'undefined' ){
$('#'+list[i]).fadeIn(time).fadeOut(time,function(){_func(i+1)});
}else{
_func(0);
}
}
return _func(0);
}
========

ですかね。これだと空の配列を渡したときや存在しない id を渡したときのエラー処理が甘いですが… (たぶんエラーが出てそこで終了します)

おせっかいかもしれませんが、人の書いたコードを使ってもしバグがあったら大変なので、ちゃんとご自分で理解なさってから使われたほうがいいですよ。何しろ不特定多数の人に公開しちゃうわけですから。

お礼

ありがとうございます。
実は上記はすでに試して動くこと確認してました。

jqueryはじめたばかりで、jqueryの作法というか、一般的なコーディングを知りたくてあえて質問させていただきました。

jqueryは奥が深いですね。

回答No.2

noname#87714

ちょっと間違えました。

========
function serialFadeInOut(list,time){
function _func(i){
if( typeof list[i] !== 'undefined' ) $('#'+list[i]).fadeIn(time).fadeOut(time,function(){_func(i+1)});
}
return _func(0);
}
========

このぐらい簡単になります。

お礼

ありがとうございます。

これだと画像が一巡するとおわっちゃいますよね？
また、最初から繰り返す場合はどうすればよいのでしょうか。

回答No.1

noname#87714

http://stacktrace.jp/jquery/api/effects/fadein(speed,callback).html

コールバック関数が指定できるっぽいですよ。

この場合だったら、
==========
$('#i1').fadeIn(3000).fadeOut(3000,function(){
$('#i2').fadeIn(3000).fadeOut(3000,function(){
$('#i3').fadeIn(3000).fadeOut(3000,function(){
$('#i4').fadeIn(3000).fadeOut(3000,function(){
$('#i5').fadeIn(3000).fadeOut(3000)
})
})
})
})
==========

というような処理になると思いますが、メンテナンス性が悪いので別に関数を定義してやったほうがいいです。

==========
function serialFadeInOut(list,time){
function _func(i){
if( typeof list[i] !== 'undefined' ){
$('#'+list[i]).fadeIn(time).fadeOut(time,function(){_func(i+1)});
}else{
$('#'+list[i]).fadeIn(time).fadeOut(time);
}
}
return _func(0);
}

var mylist = ['i1','i2','i3','i4','i5'];
var mytime = 3000;
serialFadeInOut(mylist,mytime);
==========

http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=jquery_plugin_fade
「jquery effect 順番」とか検索したらこんなのが出てきましたけど。