JavaScript アニメのループ動作について

iOSでSWFが動かないことから、JavaScript で簡単なアニメを作ろうと思っています。
初めてなので、アニメのループ動作に詳しい方教えてください。
（ｊＱｕｅｒｙと合わせて、動作させます）

2個の動作を定義しています。

《動作Ａ》

$(function(){
setTimeout(function(){
$('#photo').animate({
width: "776px",
opacity: 1,

}, 1500 ); },500);
//500遅らせる指示

});

《動作Ｂ》

$(function(){
setTimeout(function(){
$('#word').animate({
width: "398px",
opacity: 1,

}, 3000 );
},700);
//700遅らせる指示

});

このうち、動作Ｂのみを

動作完了　→　1000msec 表示キープ　→　3000msec　の逆動作で消える　→　1000msec 表示無し
これを一連の動作として、ループさせたいのです。

interval 関連のコマンドの説明を見ましたが、自分にはわかりませんでした。
《動作Ｂ》に書き足して、ループできるなら、具体的記述で教えてください。

以上、よろしくお願いします。

No.1 回答者： fujillin 回答日時： 2013/11/15 14:10

考え方のみですが…

＞動作完了　→　1000msec 表示キープ　→　3000msec　の逆動作で消える　→　1000msec
＞表示無し　これを一連の動作として、ループさせたいのです。
　1）まず、『動作→表示キープ→逆動作』を行う関数を作成します。
　2）これを、setIntervalで8000msec間隔で繰り返します。
これで、ほぼご質問のようになると思います。

1）の関数作成の際にアニメーションを順序を保って実行するには、jQueryを用いているようですので、callback関数を利用することで比較的簡単に実現できると思います。

この回答への補足

fujillin　様
自分なりに考えてみました。

>1）まず、『動作→表示キープ→逆動作』を行う関数を作成します。

これを以下のように書きました。
無駄が多いと思いますが、一応動作しています。
（ループ無し、#light　名で定義）
----------------------------------------

//ライトの動き、3000遅れて開始 2000で表示
$(function(){
setTimeout(function(){
　　 $('#light').animate({
width: "770px" ,
height: "25px" ,
opacity: 1 ,
}, 2000 );
},3000);
//3000遅らせる指示
});

//ライトの動き、5000保持
$(function(){
setTimeout(function(){
　　 $('#light').animate({
width: "770px" ,
height: "25px" ,
opacity: 1 ,
}, 5000 );
},5000);
//5000遅らせる指示
});

//ライトの動き、2000で消える
$(function(){
setTimeout(function(){
　　 $('#light').animate({
width: "12px" ,
height: "25px" ,
opacity: 0.01 ,
}, 2000 );
},10000);
//10000遅らせる指示
});

//ライトの動き、5000消えた状態保持 17000で動作完
$(function(){
setTimeout(function(){
　　 $('#light').animate({
width: "12px" ,
height: "25px" ,
opacity: 0.01 ,
}, 5000 );
},12000);
//12000遅らせる指示
});

----------------------------------------

>2）これを、setIntervalで8000msec間隔で繰り返します。

これが、判りません。
4個の動作を束ねて、setInterval指示を色々書きましたが、うまく動作しません。
知識不足です。

そこのところ、教えてください。

補足日時：2013/11/17 14:11

No.2 ベストアンサー 回答者： fujillin 回答日時： 2013/11/18 14:22

ANo1です。

繰返しの1回分を、setTimeoutなどを利用して書いてしまうとややこしくなります。（出来ないことはないですが…）
普通にanimate関数とそのcallbackを利用して1回分を記述しておいて、それをsetTimeouｔやsetIntervalなどで繰り返すのがわかりやすいかと思います。
ANo1もそのようなつもりで、回答いたしました。
（もちろん、方法は他にもいろいろあると思います）


待つ時間や動きの内容がご質問文と補足で違うので、どれが本当なのか不明ですが、とりあえず単純化したサンプルを以下に。

（全角空白は半角に）
$(function(){
//初期設定
　var target = $("#light").css({width:0, opacity:0});

//繰り返しの1回分を定義
　var repeat = function(){
　　target.delay(1000).animate({ width: 398, opacity:1 }, 3000, function(){
　　　target.delay(1000).animate({ width:0, opacity:0 }, 3000);
　　});
　}

//repeatを繰り返す
　repeat(); //最初はすぐに実行
　var intervaId = setInterval(repeat, 8000);　//8秒後から繰返し

});

※時間やタイミング、アニメーションの内容などは適宜調整してください。

この回答へのお礼

書き方が、判りにくく済みません。

delayとjQueryのバージョンに問題あるらしく、
教えていただいた状態では動きませんでした。

//繰り返しの1回分を定義　の内部は、前の自前の
無駄の多い書き方を入れたら動作しました。

ちょっと不細工ですが、とりあえず動いているので。
ありがとうございました。
お礼を申しあげます。

お礼日時：2013/11/21 10:11