アニメーションをループさせたい

質問

すみませんjquery初心者です。

下記の様な簡単なスライドショーを作りたいのですが、
----------------------------------------------------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>
setTimeout(function() {
$(".slide01").hide();
$(".slide02").show();
}, 3000);

setTimeout(function() {
$(".slide02").hide();
$(".slide03").show();
}, 6000);

setTimeout(function() {
$(".slide03").fadeOut(2000);
$(".slide04").fadeIn(2000);
}, 9000);

setTimeout(function() {
$(".slide04").fadeOut(2000);
$(".slide01").fadeIn(2000);
}, 15000);
</script>

<style>
p.slide01,
p.slide02,
p.slide03,
p.slide04 {
position: absolute;
}
</style>

<div class="slide">
<p class="slide01"><img src="images/image01.jpg" alt="" /></p>
<p class="slide02" style="display:none;"><img src="images/image02.jpg" alt="" /></p>
<p class="slide03" style="display:none;"><img src="images/image03.jpg" alt="" /></p>
<p class="slide04" style="display:none;"><img src="images/image04.jpg" alt="" /></p>
</div>
----------------------------------------------------------------

下記の様にループさせようとすると何やら挙動がおかしくなってしまいます。。
----------------------------------------------------------------
setInterval( function () {

setTimeout(function() {
$(".slide01").hide();
$(".slide02").show();
}, 3000);

setTimeout(function() {
$(".slide02").hide();
$(".slide03").show();
}, 6000);

setTimeout(function() {
$(".slide03").fadeOut(2000);
$(".slide04").fadeIn(2000);
}, 9000);

setTimeout(function() {
$(".slide04").fadeOut(2000);
$(".slide01").fadeIn(2000);
}, 15000);

},0);
----------------------------------------------------------------

どのようにすればループさせることが出来るのでしょうか？
ご教授頂けると非常に助かります。

よろしくお願いします。

回答No.3

fujillin · ベストアンサー

ＡNo1、2です。

良く見たら5秒で繰り返してますか？
全体で約17秒かかるので、5秒のループは『十分な時間』とは言えません。

お礼

fujillinさん

ご回答ありがとうございます！
なるほどそういう事だったんですね！

19秒に設定したら無事動きました。

大変助かりました！有難う御座います。

回答No.2

fujillin

ANo1です。
前回の回答時には、テストできる環境がなかったのですが…

先ほど試してみたところ、再現しませんね。
御質問の内容だけでテストしていますか？（他のスクリプトが入っていたりしませんか？）

お礼

fujillinさん

度々ご回答ありがとうございます！

他のスクリプトは入ってはいません。
上記のスクリプトのみです。

ちなみに挙動がおかしくなるのが、
2回目のループからなのです。
setTimeoutで指定している間隔がおかしくなっているようなのです。。

回答No.1

fujillin

setInterval(function(){　}, XXX)
で、XXXに十分な時間を与えてみてください。

お礼

fujillinさん

ご回答ありがとうございます。

setInterval( function () {

～

},5000);

と入れてみたのですが、
やはり挙動がおかしくなってしまいます。
slide04のフェードインが連続で出てきたり、、
アニメーションの書き方がおかしいのでしょうか。。？