jQuery 2つのsetInterval

質問

写真と文字を組み合わせたクロスフェードで行き詰りました。
２つ質問があります。

【質問１】
１番目のテキストがフェードイン→3秒待機→1番目のテキストと
1番目の写真がフェードアウト→2番目・3番目同じ→繰り返し。
という感じにしたいのですが、下記の#text-boxの設定ですと
setIntervalで5秒間隔でフェードインになるので#photo-boxとの
タイミングが5秒ずれてしまいます。
これを合わせるにはどうすればよいのでしょうか？

【質問２】
下記のように、１つのdivでテキストと写真を入れると正常に動かなくなります。
それぞれ分けてdiv(#text-box,#photo-box)で囲うと動きます。
この原因はなんでしょうか？

<div id="all-box">
<p class="text">1番目のテキスト</p>
<p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p>
<p class="text">2番目のテキスト</p>
<p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p>
<p class="text">3番目のテキスト</p>
<p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p>
</div>

宜しくお願いします。

$(function(){

$("#text-box .text").hide();

setInterval(function(){
$("#text-box")
.find(".text:first-child")
.fadeIn(1000)
.delay(3000)
.fadeOut(1000)
.next(".text")
.end()
.appendTo("#text-box");
},5000);

$("#photo-box .photo:gt(0)").hide();

setInterval(function(){
$("#photo-box")
.find(".photo:first-child")
.fadeOut(1000)
.next(".photo")
.fadeIn(1000)
.end()
.appendTo("#photo-box");
},5000);

});

■HTML
<div id="all-box">

<div id="text-box">
<p class="text">1番目のテキスト</p>
<p class="text">2番目のテキスト</p>
<p class="text">3番目のテキスト</p>
</div>

<div id="photo-box">
<p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p>
<p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p>
<p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p>
</div>

</div>

■CSS
#all-box{
position:relative;
width:500px;
height:200px;
}

#text-box,#photo-box{
width:500px;
height:200px;
}

#text-box .text{
position:absolute;
top:80px;
left:0;
z-index:2;
}

#photo-box .photo{
position:absolute;
top:0;
left:0;
width:500px;
height:200px;
z-index:1;
}

回答No.5

神崎 渉瑠（@taloo）

>No.3お礼

indexは何番目のテキスト、写真を表示、非表示するかを判断するための物です。

functionがわからないのであれば、jQueryを使わずにもっと基本的な所から始めた方が良いです。
http://piyo-js.com/02/user.html

>このソースですと.photoの1枚目がフェードインから
>始まっていますが、最初は表示された状態にしたいのです。

では練習のために、ご自身で作り替えてみてください。

・プログラムの開始時点で１枚目を表示にしておく（.hide()の前か後か？run()の前か後か？）
・indexの最初は２つめを指し示すようにする

これができればご希望の動作になるはずです。

----------
index= (++index%3);
というのは、

++index;
index = index%3;

を１行で書いた物です。

回答No.4

神崎 渉瑠（@taloo）

>【質問１】
>１番目のテキストがフェードイン→3秒待機→1番目のテキストと
>1番目の写真がフェードアウト→2番目・3番目同じ→繰り返し。

提示されたスクリプトと全く違う方法ですが、作ってみました。
No.3で書いた２つめの方法に、１つめの待機時間を追加しています。
Defferedオブジェクトの使い方がわからないので、コールバック関数のベタ書きです。

<div id="all-box">
<p class="text">1番目のテキスト</p>
<p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p>
<p class="text">2番目のテキスト</p>
<p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p>
<p class="text">3番目のテキスト</p>
<p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p>
</div>

<script>
var index = 0;
function run(){
$( $('#all-box .text')[index] ).fadeIn(1000).delay(3000).fadeOut(1000, run);
$( $('#all-box .photo')[index] ).fadeIn(1000).delay(3000).fadeOut(1000);
index= (++index%3);
}
$('#all-box .text, #all-box .photo').hide();
run();
</script>

$( $('#all-box .text')[index] ).next('.photo').addBack()とすれば１行で行けるかと思ったのですが、どうも前回のrun()の要素まで持ってきてしまうのか、addBack()のキューに何が入ってるのかわからなかったので、２行にわけました。

:nth-of-typeが使えないようなので、$( )が２重になっています。

お礼

talooさん
何度も貴重なお時間を頂いて、ありがとうございます。

このソースですと.photoの1枚目がフェードインから
始まっていますが、最初は表示された状態にしたいのです。
説明不足で申し訳ありません。

あと、var index = 0;のindexはどういう意味でしょうか？
function run()やrun();はjqueryの書き方ですか？
調べてみても見つからず、始めたばかりで何がどういう意味なのか
理解出来ておりません。

宜しくお願いします。

回答No.3

神崎 渉瑠（@taloo）

No.2です。
中でアニメーションを待たないと行けないので、setInterval()の第二引数では無理ですね。
失礼しました。

別のタイミングで待機時間を減らすか増やすようにしないとダメですが、

A : 10,000ミリ秒掛かる処理
B : 5,000ミリ秒掛かる処理

この２つを同期させるには、
・Aを5,000ミリ秒で処理を終わらせるようにする
・Bを5,000ミリ秒で処理を終わらせ、5,000ミリ秒待機させる
という２つの方法があります。

-----------
コールバック関数を使うなら、Aの方が処理完了が遅いので、
function run(){
A();
B();
}
というのを用意しておいて、
Aが終了したらA、Bを実行する関数を実行するといいと思います。

function run(){
A(); // -> callback関数でrun()を実行
B();
}

こういう複数の非同期処理を同期させるのがDefferedオブジェクトらしいのですが、使い方がよくわかりません。

----------

１つのタイマーで処理するのであれば、イメージとしてはこういう感じになります。

var a_finished = false; //処理完了フラグ
var b_finished = false;
A(); // 完了したらa_finished = true;
B();// 完了したらb_finished = true;

setInterval( function(){
　if( a_finished && b_finished ){
　　A();
　　B();
　}
}, 1 );

処理完了フラグは変数として持っておかずに、element.style.visibitity==='hidden'などで判断しても良いと思います。
（おそらくjQueryのanimation()はこの方法のようですが、animation()の引数に指定されたstyleをフラグとして使っていると思います。）

回答No.2

神崎 渉瑠（@taloo）

>No.1お礼
>>.delay()を入れて待機させれば良いのではないでしょうか。
>
>遅らせるのではなく、5秒早くしたいのです。

setInterval()の第二引数を0にするのではダメなのでしょうか。

しかし2つのタイマーを完全に同期させるのは別の監視処理が必要になりますので、
コールバック関数を使って次の処理を呼び出したり、１つのタイマーで全ての処理を行う方が簡単だと思います。

回答No.1

神崎 渉瑠（@taloo）

>【質問１】
> （略）
>タイミングが5秒ずれてしまいます。
>これを合わせるにはどうすればよいのでしょうか？

.delay()を入れて待機させれば良いのではないでしょうか。

>【質問２】
>下記のように、１つのdivでテキストと写真を入れると正常に動かなくなります。
>それぞれ分けてdiv(#text-box,#photo-box)で囲うと動きます。
>この原因はなんでしょうか？

どういう状態が正常で、どういう状態が正常でないと判断されたのでしょうか？

お礼

>.delay()を入れて待機させれば良いのではないでしょうか。

遅らせるのではなく、5秒早くしたいのです。

>どういう状態が正常で、どういう状態が…

すみません、説明が長くなるので別で質問させて頂きます。