質問編集履歴

2

試したことの詳細追加

2017/09/15 11:32

投稿

KotaroImai
KotaroImai

スコア11

test CHANGED
File without changes
test CHANGED
@@ -8,9 +8,69 @@
8
8
 
9
9
  ###試したこと
10
10
 
11
- setIntervalを使おうと思ったのですが、初心者のため書き方がわからず、うまくできませんでした。
12
11
 
13
12
 
13
+ ```jQuery
14
+
15
+ $(function () {
16
+
17
+ var slide = function () {
18
+
19
+ $(".step_box:not(.select)").hide();
20
+
21
+ $(".step_box.select").fadeOut('fast', function () {
22
+
23
+ $(this).removeClass('select');
24
+
25
+ if ($(this).next('.step_box').length === 1) {
26
+
27
+ $(this).next('.step_box').fadeIn('fast').addClass('select');
28
+
29
+ } else {
30
+
31
+ $(".step_box:first").fadeIn('fast').addClass('select');
32
+
33
+ }
34
+
35
+ });
36
+
37
+ };
38
+
39
+ setInterval(slide, 3000);
40
+
41
+ });
42
+
43
+ ```
44
+
45
+
46
+
47
+ ```html
48
+
49
+ <div class="step_box select">
50
+
51
+ <span>1</span><p>テスト1</p>
52
+
53
+ </div>
54
+
55
+ <div class="step_box">
56
+
57
+ <span>2</span><p>テスト2</p>
58
+
59
+ </div>
60
+
61
+ <div class="step_box">
62
+
63
+ <span>3</span><p>テスト3</p>
64
+
65
+ </div>
66
+
67
+
68
+
69
+ ```
70
+
71
+
72
+
73
+ 現状上記コードで動くのですがfadein等が書かれているため、selectクラスが付与されていない要素は消えてしまいます。どの要素も消えず、select要素があるもののみボーダーのスタイルが反映されるとしたいです。
14
74
 
15
75
 
16
76
 

1

具体的な目標を追記

2017/09/15 11:32

投稿

KotaroImai
KotaroImai

スコア11

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