• 締切済み

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); 同時にではなく、順番(1を表示した後に2というように)に表示するにはどうすればよいのでしょうか?

みんなの回答

noname#87714
noname#87714
回答No.3

======== 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 を渡したときのエラー処理が甘いですが… (たぶんエラーが出てそこで終了します) おせっかいかもしれませんが、人の書いたコードを使ってもしバグがあったら大変なので、ちゃんとご自分で理解なさってから使われたほうがいいですよ。何しろ不特定多数の人に公開しちゃうわけですから。

pawooon
質問者

お礼

ありがとうございます。 実は上記はすでに試して動くこと確認してました。 jqueryはじめたばかりで、jqueryの作法というか、一般的なコーディングを知りたくてあえて質問させていただきました。 jqueryは奥が深いですね。

noname#87714
noname#87714
回答No.2

ちょっと間違えました。 ======== 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); } ======== このぐらい簡単になります。

pawooon
質問者

お礼

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

noname#87714
noname#87714
回答No.1

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 順番」とか検索したらこんなのが出てきましたけど。

関連するQ&A