teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jQueryのbefore(),after()メソッドについて

編集履歴

質問編集履歴

2

書式を改善しました。

2020/01/03 15:22

投稿

pakumakun
pakumakun

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,34 +1,98 @@
1
1
  ```ここに言語を入力
2
2
 
3
+ <div id="container">
4
+
5
+ <div id="navi">
6
+
3
- <div class="pageWrap">
7
+ <div class="pageWrap">
8
+
9
+ <div class="page">
10
+
11
+ <ul>
12
+
13
+ <li><a href="images/photo1.jpg"><img src="images/photo1_thum.jpg"></a></li>
14
+
15
+ <li><a href="images/photo2.jpg"><img src="images/photo2_thum.jpg"></a></li>
16
+
17
+ <li><a href="images/photo3.jpg"><img src="images/photo3_thum.jpg"></a></li>
18
+
19
+ <li><a href="images/photo4.jpg"><img src="images/photo4_thum.jpg"></a></li>
20
+
21
+ <li><a href="images/photo5.jpg"><img src="images/photo5_thum.jpg"></a></li>
22
+
23
+ <li><a href="images/photo6.jpg"><img src="images/photo6_thum.jpg"></a></li>
24
+
25
+ <li><a href="images/photo7.jpg"><img src="images/photo7_thum.jpg"></a></li>
26
+
27
+ <li><a href="images/photo8.jpg"><img src="images/photo8_thum.jpg"></a></li>
28
+
29
+ </ul>
30
+
31
+ <p><img src="images/btn_next.jpg" alt="次へ" class="next"></p>
32
+
33
+ </div>
4
34
 
5
35
  <div class="page">
6
36
 
7
- <ul>
37
+ <ul>
8
38
 
9
- <li><a href="images/photo1.jpg"><img src="images/photo1_thum.jpg"></a></li>
39
+ <li><a href="images/photo9.jpg"><img src="images/photo9_thum.jpg"></a></li>
10
40
 
11
- <li><a href="images/photo2.jpg"><img src="images/photo2_thum.jpg"></a></li>
41
+ <li><a href="images/photo10.jpg"><img src="images/photo10_thum.jpg"></a></li>
12
42
 
13
- <li><a href="images/photo1.jpg"><img src="images/photo1_thum.jpg"></a></li>
43
+ <li><a href="images/photo11.jpg"><img src="images/photo11_thum.jpg"></a></li>
14
44
 
15
- <li><a href="images/photo2.jpg"><img src="images/photo2_thum.jpg"></a></li> 　
45
+ <li><a href="images/photo12.jpg"><img src="images/photo12_thum.jpg"></a></li>
16
46
 
17
- </ul>
47
+ <li><a href="images/photo13.jpg"><img src="images/photo13_thum.jpg"></a></li>
18
48
 
49
+ <li><a href="images/photo14.jpg"><img src="images/photo14_thum.jpg"></a></li>
50
+
51
+ <li><a href="images/photo15.jpg"><img src="images/photo15_thum.jpg"></a></li>
52
+
53
+ <li><a href="images/photo16.jpg"><img src="images/photo16_thum.jpg"></a></li>
54
+
55
+ </ul>
56
+
57
+ <p><img src="images/btn_prev.jpg" alt="前へ" class="prev">
58
+
59
+ <img src="images/btn_next.jpg" alt="次へ" class="next">
60
+
61
+ </p>
62
+
19
- </div>
63
+ </div>
64
+
65
+ <div class="page">
66
+
67
+ <ul>
68
+
69
+
70
+
71
+ <li><a href="images/photo17.jpg"><img src="images/photo17_thum.jpg"></a></li>
72
+
73
+ <li><a href="images/photo18.jpg"><img src="images/photo18_thum.jpg"></a></li>
74
+
75
+ <li><a href="images/photo19.jpg"><img src="images/photo19_thum.jpg"></a></li>
76
+
77
+ </ul>
78
+
79
+ <p><img src="images/btn_prev.jpg" alt="前へ" class="prev"></p>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ <div id="main">
88
+
89
+ <img src="images/photo1.jpg">
90
+
91
+ </div>
20
92
 
21
93
  </div>
22
94
 
23
95
 
24
-
25
-
26
-
27
- <div id="main">
28
-
29
- <img src="images/photo1.jpg">
30
-
31
- </div>
32
96
 
33
97
  ```
34
98
 
@@ -40,19 +104,43 @@
40
104
 
41
105
  ```ここに言語を入力
42
106
 
43
- $("#navi ul li a").click(function(){
107
+ $(function(){
44
108
 
45
- $("#main img”).before("<img src='"+$(this).attr("href")+"'>");
109
+ $("#navi ul li a").click(function(){
46
110
 
47
- $("#main img:last").fadeOut("slow",function(){
111
+ $("#main img").before("<img src='"+$(this).attr("href")+"'>");
48
112
 
49
- $(this).remove();
113
+ $("#main img:last").fadeOut("slow",function(){
50
114
 
51
- });
115
+ $(this).remove();
52
116
 
53
- return false;
117
+ });
54
118
 
119
+ return false;
120
+
55
- });
121
+ });
122
+
123
+ $("img.next").click(function(){
124
+
125
+ $(".pageWrap").animate({
126
+
127
+ "margin-left":parseInt($("#navi .pageWrap").css("margin-left"))-300+"px"
128
+
129
+ },"fast");
130
+
131
+ });
132
+
133
+ $("img.prev").click(function(){
134
+
135
+ $(".pageWrap").animate({
136
+
137
+ "margin-left":parseInt($("#navi .pageWrap").css("margin-left"))+300+"px"
138
+
139
+ },"fast");
140
+
141
+ });
142
+
143
+ });
56
144
 
57
145
  ```
58
146
 
@@ -64,19 +152,19 @@
64
152
 
65
153
  ```ここに言語を入力
66
154
 
67
- $("#navi ul li a").click(function(){
155
+ $("#navi ul li a").click(function(){
68
156
 
69
- $("#main img”).after("<img src='"+$(this).attr("href")+"'>");
157
+ $("#main img").after("<img src='"+$(this).attr("href")+"'>");
70
158
 
71
- $("#main img:first").fadeOut("slow",function(){
159
+ $("#main img:first").fadeOut("slow",function(){
72
160
 
73
- $(this).remove();
161
+ $(this).remove();
74
162
 
75
- });
163
+ });
76
164
 
77
- return false;
165
+ return false;
78
166
 
79
- });
167
+ });
80
168
 
81
169
  ```
82
170
 

1

書式改善しました。

2020/01/03 15:21

投稿

pakumakun
pakumakun

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ```ここに言語を入力
2
+
1
3
  <div class="pageWrap">
2
4
 
3
5
  <div class="page">
@@ -28,11 +30,15 @@
28
30
 
29
31
  </div>
30
32
 
33
+ ```
34
+
31
35
 
32
36
 
33
37
  上のhtmlでmainの画像をリスト内の画像に変更する時、
34
38
 
35
39
 
40
+
41
+ ```ここに言語を入力
36
42
 
37
43
  $("#navi ul li a").click(function(){
38
44
 
@@ -48,8 +54,32 @@
48
54
 
49
55
  });
50
56
 
57
+ ```
51
58
 
52
59
 
60
+
61
+ とありますが、次のように
62
+
63
+
64
+
65
+ ```ここに言語を入力
66
+
67
+ $("#navi ul li a").click(function(){
68
+
69
+ $("#main img”).after("<img src='"+$(this).attr("href")+"'>");
70
+
71
+ $("#main img:first").fadeOut("slow",function(){
72
+
73
+ $(this).remove();
74
+
75
+ });
76
+
77
+ return false;
78
+
79
+ });
80
+
81
+ ```
82
+
53
- とありますが、before→afterにして:last→:firstにするとfadeOutが効きません。
83
+ before→afterにして:last→:firstにするとfadeOutが効きません。
54
84
 
55
85
  何故か分かりませんので教えていだだけませんでしょうか。