ループ毎に一定時間の待ち時間の後に次のループを実行したい

リストを順番にアニメーションさせながら表示させています。
実装したいことは、1つのboxのループが終わる毎に1秒ほどの待ち時間を設けて次のループに進みたいです。

box1のループが実行→終了、1秒待ってbox2のループ実行...という感じが理想です。

稚拙で申し訳ありませんがご教授いただければと思います。

HTML
1<div class="box box1">
2   <div class="list"><div class="title">title</div></div>
3   <div class="list"><div class="text">text</div></div>
4   <div class="list"><div class="text">text</div></div>
5   ...
6</div>
7<div class="box box2">
8   <div class="list"><div class="title">title</div></div>
9   <div class="list"><div class="text">text</div></div>
10   <div class="list"><div class="text">text</div></div>
11   ...
12</div>
13<div class="box box3">
14   <div class="list"><div class="title">title</div></div>
15   <div class="list"><div class="text">text</div></div>
16   <div class="list"><div class="text">text</div></div>
17   ...
18</div>
19<div class="box box4">
20   <div class="list"><div class="title">title</div></div>
21   <div class="list"><div class="text">text</div></div>
22   <div class="list"><div class="text">text</div></div>
23   ...
24</div>

CSS
1.title,.text{
2   opacity:0;
3}

JavaScript
1var box = $('.box');
2var boxLength = $('.box').length;
3var animationElm = $('.title,.text');
4var arr = ['hoge1','hoge2','hoge3','hoge4'];
5   for (var i=0; i<boxLength; i++) {
6      TweenMax.staggerTo(animationElm , 0.25 , {opacity:1} ,0.25,animDone);
7   }
8function animDone() {
9   console.log('アニメーション終わりで実行);
10}

ku__ra__ge

2017/03/30 16:00 編集

目的の動作のほかに、現在のコードではどのような動作になってしまうのか、目的の動作をさせるために調査したこと・試したことも書くと回答が得られやすいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

box1以下の要素を順に表示
1秒待つ
box2以下の要素を順に表示
1秒待つ
box3以下の要素を順に表示
1秒待つ
box4以下の要素を順に表示

という動作は以下のようなコードで実現できます。
正直なところさっきが初めてTweenMaxを触ったので、変な実現方法になっている可能性がありますが。

html
1<html>
2<head>
3<style>
4.title,.text{ opacity:0; }
5</style>
6<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
7<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
8<script>
9$(function(){
10	var tl = new TimelineLite();
11
12	tl.staggerTo('.box1 .title, .box1 .text' , 0.25 , {opacity:1} , 0.25);
13	tl.to("", 1.0, "");
14	tl.staggerTo('.box2 .title, .box2 .text' , 0.25 , {opacity:1} , 0.25);
15	tl.to("", 1.0, "");
16	tl.staggerTo('.box3 .title, .box3 .text' , 0.25 , {opacity:1} , 0.25);
17	tl.to("", 1.0, "");
18	tl.staggerTo('.box4 .title, .box4 .text' , 0.25 , {opacity:1} , 0.25);
19});
20</script>
21</head>
22<body>
23
24<div class="box box1">
25   <div class="list"><div class="title">title</div></div>
26   <div class="list"><div class="text">text</div></div>
27   <div class="list"><div class="text">text</div></div>
28</div>
29<div class="box box2">
30   <div class="list"><div class="title">title</div></div>
31   <div class="list"><div class="text">text</div></div>
32   <div class="list"><div class="text">text</div></div>
33</div>
34<div class="box box3">
35   <div class="list"><div class="title">title</div></div>
36   <div class="list"><div class="text">text</div></div>
37   <div class="list"><div class="text">text</div></div>
38</div>
39<div class="box box4">
40   <div class="list"><div class="title">title</div></div>
41   <div class="list"><div class="text">text</div></div>
42   <div class="list"><div class="text">text</div></div>
43</div>
44
45</body>
46</html>