jQueryのanimate速度が微妙にずれてしまう

Question

お世話におります。jQuery初心者です。
前日にスライドショーをteratailで教えていただきました。
スライドが紙芝居式になっていて、スライドが表示されてる時間までバーが伸び、スライドされると
スライドに合わせてバーが縮む仕組みを作りましたが、どうしてもスライドとバーのdurationにズレが
生じてしまいます。
なぜズレが生じてしまうのでしょうか。また、このズレを解消する方法があれば、ご教授の方よろしくお願いします。

html

		<div class="slider">
            <div id="rect"> </div>  
			<ul class="slider_road">
				<li class="slide"><img src="1.png" class="img1"></li>
                <li class="slide"><img src="2.png" class="img2"></li>
                <li class="slide"><img src="3.png" class="img3"></li>
            </ul>
</div>

css

.slider {
	max-width: 640px;
	width: 96%;
	margin: 15px 2%;
	height: 500px;
	clear:both;
	overflow: hidden;
	position: relative;
	background-color: #C9E6FD;
}

#rect {
	position: absolute;
	top: 15px;
	left: 0;
	background: #87d3ff;
	width:0px;
	height: 3px;
	text-align: center;
	color: #fff;
	z-index: 3;
}

slider_road {
    position: relative;
    height: auto;
	top:30px;
	margin: 0;
    padding: 0;
    list-style: none;
}
.slide {
	list-style: none;
    width: 100%;
    height:auto;
    top: 30px;
    left: 0;
    float: left;
    position: absolute;
}

js

$(function () {
    setTimeout('rect()'); //アニメーションを実行
});

function rect() {
	$("#rect").animate({width: '100%'},3000).animate({width:'0%'},{ duration:1000});
	setTimeout("rect()");
}

$(function(){
    setInterval(function() {
        var slide = $('.slide');
        slide.first().stop().animate({marginLeft:0});
        slide.last().stop().animate({marginLeft:'-100%'},1000,function(){slide.last().prependTo(slide.parent())});
		
    }, 3000);    //setInterval() 
});

Answer 1

面白いことをしてますね。
それぞれ、別のタイマーを使っていればずれますよ。

window.onload = function(){
    $("#rect").stop().animate({width: '100%'},3000);
    setInterval(function() {
        $("#rect").stop().animate({width:'0%'},1000);
        var slide = $('.slide');
        slide.first().stop().animate({marginLeft:0});
        slide.last().stop().animate({marginLeft:'-100%'},1000,function(){
          slide.last().prependTo(slide.parent());
          $("#rect").stop().animate({width: '100%'},2000);
        });
    }, 3000);    //setInterval() 
};

こうして一つのタイマーの中でやったらどうですか？
動くか検証してませんが・・・

Comments

[SaekoIwaki]

前日に引き続き、ありがとうございます。

やはり同じfunction内でやるべきですね。
教えていただきました、方法を実際にしましたら最初の
$("#rect").stop().animate({width: '100%'},3000);
だけ動いてくれませんでした。

試しに最初からバーがある状態で試したら
bar.stop().animate({width:'0%'},1000);
はちゃんと効いていて、スライドと同じ速度で
0%になってくれました。
setTimeout('#rect()')等入れたり、var bar = $('#rect')で
試してみましたが、どうしても最初だけ効きませんでした。

どうして最初だけ効かないのか調べる方法等があればご教授の方よろしくお願いします。

[shi_ue]

あ、ダメダメでした。
修正しますね。ちょっとお待ちを。

[shi_ue]

まず、画像が読み込まれなければならないので、起動するのはwindow.onloadにしました。
動きの順序ですが、
・windowのload時に#rectが伸び始めます。
・3秒後にintervalが動くと同時に、#rectを1秒かけて戻します。
・slide.last().stop().animateの動作が終了後、#rectが伸び始めます。
・以下繰り返し。
てな具合ですが、どうでしょうか。

[SaekoIwaki]

ご教授ありがとうございます。
早速試した所、やはり二枚目から微妙なズレが生じてしまい(2枚から、バーが最後に行く前にスライドしてしまう)、どんどんずれていってしまいます。。。
ふと思ったのですが、本来はスライドが表示されてから最後まで合計4秒かかるのでしょうか。
タイマーで測った所、3枚のスライドが9秒で終わっていましたので、スライドされる1秒が3秒に含まれている為、ずれている。これがずれる理由なんでしょうか。

[shi_ue]

あ、そうですね（笑）
setIntevalは3秒おきですが、次の3秒の頭1秒を使ってスライドしますから。

[shi_ue]

最初だけはsetintervalと同じにしなければならないので、3000msですね。

[SaekoIwaki]

ご返事ありがとうございます。
無事にできました!!ほぼ作ってもらった形になってしまいましたが、すごく勉強になりました。
これからスライドボタン等も作る予定なのでもしお時間があったらその時もご教授していただければ幸いです!
ありがとうございました!!