teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

試したことの詳細追加

2017/09/15 11:32

投稿

KotaroImai
KotaroImai

スコア11

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,37 @@
3
3
  一つ目のdiv要素にselectを与えた3秒後に、一つ目のdiv要素からselectを取り除き、二つ目のdiv要素にselectを与えるといったイメージです。
4
4
 
5
5
  ###試したこと
6
- setIntervalを使おうと思ったのですが、初心者のため書き方がわからず、うまくできませんでした。
7
6
 
7
+ ```jQuery
8
+ $(function () {
9
+ var slide = function () {
10
+ $(".step_box:not(.select)").hide();
11
+ $(".step_box.select").fadeOut('fast', function () {
12
+ $(this).removeClass('select');
13
+ if ($(this).next('.step_box').length === 1) {
14
+ $(this).next('.step_box').fadeIn('fast').addClass('select');
15
+ } else {
16
+ $(".step_box:first").fadeIn('fast').addClass('select');
17
+ }
18
+ });
19
+ };
20
+ setInterval(slide, 3000);
21
+ });
22
+ ```
8
23
 
24
+ ```html
25
+ <div class="step_box select">
26
+ <span>1</span><p>テスト1</p>
27
+ </div>
28
+ <div class="step_box">
29
+ <span>2</span><p>テスト2</p>
30
+ </div>
31
+ <div class="step_box">
32
+ <span>3</span><p>テスト3</p>
33
+ </div>
34
+
35
+ ```
36
+
37
+ 現状上記コードで動くのですがfadein等が書かれているため、selectクラスが付与されていない要素は消えてしまいます。どの要素も消えず、select要素があるもののみボーダーのスタイルが反映されるとしたいです。
38
+
9
39
  どうぞよろしくお願いいたします。

1

具体的な目標を追記

2017/09/15 11:32

投稿

KotaroImai
KotaroImai

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  ###【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく
2
- step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を3秒間ごとに順番に付与したいです。
2
+ step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を3秒間ごとに順番に付与したいです。selectクラスを付与した要素はボーダーで囲もうと考えています。
3
3
  一つ目のdiv要素にselectを与えた3秒後に、一つ目のdiv要素からselectを取り除き、二つ目のdiv要素にselectを与えるといったイメージです。
4
4
 
5
5
  ###試したこと