表題の通り、divボックスの枠を順番に表示・非表示させたいのですが、
どのようにすれば良いのか、何と調べれば解決策が出てくるのかわかりません。

ボックスの数は決まっておりません。
増えたり、減らしたりすることも想定されます。
また、レスポンシブです。

恐れ入りますが、
ご教示の程よろしくお願いいたします。

m.ts10806

2019/04/05 07:26

「順番」とはトリガーは何でしょうか

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

回答1件

ベストアンサー

javascript
1<style>
2.hoge{height:100px;width:100px;padding:3px;}
3.hoge.active{border:solid 3px red;padding:0px}
4</style>
5<script>
6var count=0;
7$(function(){
8  setInterval(function(){
9    count++;
10    var idx=count%$('.hoge').length;
11    $('.hoge').removeClass('active').eq(idx).addClass('active');
12  },1000);
13});
14</script>
15<div class="hoge active">ここに中身</div>
16<div class="hoge">ここに中身</div>
17<div class="hoge">ここに中身</div>

hover対応

javascript
1<style>
2.hoge{height:100px;width:100px;padding:3px;}
3.hoge.active{border:solid 3px red;padding:0px}
4</style>
5<script>
6var timerId;
7var idx=0;
8$(function(){
9  $('.hoge').on('mouseover',function(){
10    clearInterval(timerId);
11    $('.hoge').removeClass('active');
12    $(this).addClass('active');
13  }).on('mouseout',function(){
14    timerId=setInterval(function(){
15      idx++;
16      idx%=$('.hoge').length;
17        $('.hoge').removeClass('active').eq(idx).addClass('active');
18    },1000);
19    idx=$('.hoge').index(this);
20  }).eq(0).trigger('mouseout');
21});
22</script>
23<div class="hoge active">ここに中身</div>
24<div class="hoge">ここに中身</div>
25<div class="hoge">ここに中身</div>
26<div class="hoge">ここに中身</div>