###【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく
step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を3秒間ごとに順番に付与したいです。selectクラスを付与した要素はボーダーで囲もうと考えています。
一つ目のdiv要素にselectを与えた3秒後に、一つ目のdiv要素からselectを取り除き、二つ目のdiv要素にselectを与えるといったイメージです。
###試したこと
jQuery
1$(function () { 2 var slide = function () { 3 $(".step_box:not(.select)").hide(); 4 $(".step_box.select").fadeOut('fast', function () { 5 $(this).removeClass('select'); 6 if ($(this).next('.step_box').length === 1) { 7 $(this).next('.step_box').fadeIn('fast').addClass('select'); 8 } else { 9 $(".step_box:first").fadeIn('fast').addClass('select'); 10 } 11 }); 12 }; 13 setInterval(slide, 3000); 14});
html
1<div class="step_box select"> 2 <span>1</span><p>テスト1</p> 3</div> 4<div class="step_box"> 5 <span>2</span><p>テスト2</p> 6</div> 7<div class="step_box"> 8 <span>3</span><p>テスト3</p> 9</div> 10
現状上記コードで動くのですがfadein等が書かれているため、selectクラスが付与されていない要素は消えてしまいます。どの要素も消えず、select要素があるもののみボーダーのスタイルが反映されるとしたいです。
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー