要素を特定秒数ごとに特定個数づつループ表示させたい。

要素を特定秒数ごとに特定個数づつループで表示させたいです。

具体的構成は以下の通りです。

lang
1<div class="hoge_wrap">
2<div class="hoge"></div>
3<div class="hoge"></div>
4<div class="hoge"></div>
5<div class="hoge"></div>
6<div class="hoge"></div>
7<div class="hoge"></div>
8<div class="hoge"></div>
9<div class="hoge"></div>
10<div class="hoge"></div>
11<div class="hoge"></div>
12<div class="hoge"></div>
13<div class="hoge"></div>
14<div class="hoge"></div>
15<div class="hoge"></div>
16<div class="hoge"></div>
17</div>

lang
1.hoge {
2    display: none;
3}

連続するそれぞれの「hoge_wrap」内の「hoge」を2秒ごとに1番目から5つづつループで表示させたいです。

▼2秒目まで
1番目から5番目までを表示
▼4秒目まで
1番目から5番目までを再度非表示
6番目から10番目までを表示
▼6秒目まで
6番目から10番目までを再度非表示
11番目から15番目までを表示
▼8秒目まで
11番目から15番目までを再度非表示
1番目から5番目までを再表示
・・・・・以下ループ

ループ処理を考慮できておりませんが、以下の処理を試しましたのですがうまくいきませんでした。

lang
1$(".hoge_wrap").each(function(){     
2    $(this).find('.hoge:lt(4):gt(0)').attr({"style":"display:block;"});
3    setTimeout(function(){     
4    $(this).find('.hoge:lt(4):gt(0)').removeAttr("style");
5    $(this).find('.hoge:lt(9):gt(5)').attr({"style":"display:block;"});
6    },2000);
7    setTimeout(function(){
8    $(this).find('.hoge:lt(9):gt(5)').removeAttr("style");
9    $(this).find('.hoge:lt(14):gt(10)').attr({"style":"display:block;"});
10    },4000);
11});

さらに、こちらはdisplayの取捨による単純な表示・非表示ですが、フェード切り替えができればベストです。

なお、今回既存サイトの改修で既存システムへの干渉防止の観点より、一部メソッド(※)の使用が禁止されているため以下のメソッドを使用せず実現できる方法をご教授ください。
「document」「window」「eval」「alert」「confirm」「top」「prompt」「self」「parent」「XMLHTTPRequest」

ご教授のほどよろしくお願いいたします。

kei344

2016/11/05 18:23

「document」「window」は通常メソッドではありませんが、「メソッド」ではなく「変数名」の間違いではありませんか？

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

回答2件

ベストアンサー

HTML
1<!DOCTYPE html>
2<title>sample</title>
3<body>
4
5  <div class="hoge_wrap">
6    <div class="hoge">1</div>
7    <div class="hoge">2</div>
8    <div class="hoge">3</div>
9    <div class="hoge">4</div>
10    <div class="hoge">5</div>
11    <div class="hoge">6</div>
12    <div class="hoge">7</div>
13    <div class="hoge">8</div>
14    <div class="hoge">9</div>
15    <div class="hoge">10</div>
16    <div class="hoge">11</div>
17    <div class="hoge">12</div>
18    <div class="hoge">13</div>
19    <div class="hoge">14</div>
20    <div class="hoge">15</div>
21  </div>
22
23  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
24  <script>
25  $(function() {
26    //6番目以降を非表示にする
27    $(".hoge_wrap").find(".hoge").slice(5).hide();
28
29    var timer = window.setTimeout(function loopHoge() {
30      //先頭から5つ
31      var $top5 = $(".hoge_wrap").find(".hoge").slice(0, 5);
32
33      //先頭の5つをfadeOutさせたら、
34      $top5.fadeOut(1000, function() {
35        //先頭の5つを末尾に移動させる
36        $(".hoge_wrap").append($top5);
37
38        //次の5つ（再度先頭から5つ参照）をfadeIn
39        $(".hoge_wrap").find(".hoge").slice(0, 5).fadeIn(1000);
40      });
41
42      //以下繰り返し
43      timer = window.setTimeout(loopHoge, 2000);
44    }, 2000);
45  });
46  </script>
47
48</body>

投稿2016/11/05 07:09

sii_side

総合スコア849

castail

2016/11/05 08:47 編集

ご回答ありがとうございます。ご説明が漏れ恐縮ですが、今回既存サイトの改修で既存システムへの干渉防止のため、「window」含む一部メソッド(※)の使用が禁止されている状態です。 ※具体的禁止メソッド一覧は以下の通りです「document」「window」「eval」「alert」「confirm」「top」「prompt」「self」「parent」「XMLHTTPRequest」それらメソッドを使用せず実現する方法はございますでしょうか？ご回答の程よろしくお願いいたします。

sii_side

2016/11/05 09:04

元のご質問にあるソースでもsetTimeoutを使われていますが、window.と書いていないだけで、使っているメソッドは同じです（setTimeout === window.setTimeoutの結果はtrue）。文言として書かなければいいだけなら、その部分を削除するだけです。また、jQueryは内部でwindowとかdocumentとかXMLHttpRequestをごくごく普通に使用しています。これらは当該制限の対象にはならないのでしょうか？ evalとかalert、confirmなどを制限するのは十分頷けますが、windowやdocumentまで使わずにというのは、DOMツリーのアクセスから何から封じられますから、いくら何でも考えられません。何かの間違いじゃないかと思いますが…。

castail

2016/11/08 08:37 編集

ご回答ありがとうございます。当方jqueryの知識が浅く的外れなご確認となってしまいましたことをお詫びいたします。そちらの単純削除を試したのですが、うまくいっておりません。その他の記述の干渉なども考えられるので継続して調査したいと思います。この度はご回答頂きありがとうございました。

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

追加条件が微妙ですが
単純に考えればカウンタを回しながらsetInterval処理じゃないでしょうか？

javascript
1$(function(){
2  $('.hoge_wrap .hoge:gt(4)').hide();
3  var c=1;
4  setInterval(function(){
5    c%=3;
6    $('.hoge_wrap .hoge').hide();
7    $('.hoge_wrap .hoge').slice(c*5,c*5+5).show();
8    c++;
9  },2000);
10});
11