質問編集履歴
3
jsの修正を試して改善できた内容を記載しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -197,3 +197,103 @@
|
|
|
197
197
|
</body>
|
|
198
198
|
</html>
|
|
199
199
|
```
|
|
200
|
+
|
|
201
|
+
2024/4/11時点：
|
|
202
|
+
以下のように、最初に各セクションに対しての画像処理を行う記述を追加したところ、A, B, Cの挙動を統一できました！
|
|
203
|
+
|
|
204
|
+
**現時点で実現できていないことは、以下の内容のみになります。
|
|
205
|
+
②最初はmini_window_icon_wrap内の3枚の画像を表示しておき、一番上に重ねている1枚目の画像から2枚目までを順番に非表示にする処理を行う。
|
|
206
|
+
④その後、あまり間隔を空けずに、続けて表示の処理を開始し、2枚目の画像→1枚目の画像、の順番で表示の処理を行う。**
|
|
207
|
+
|
|
208
|
+
追加したコード
|
|
209
|
+
```jQuery
|
|
210
|
+
animateImages('.pile_zipup_blouson .mini_window_icon_wrap img');
|
|
211
|
+
animateImages('.border_tee .mini_window_icon_wrap img');
|
|
212
|
+
animateImages('.hoodie_sweatshirts .mini_window_icon_wrap img');
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
修正後のコード全文
|
|
216
|
+
```jQuery
|
|
217
|
+
//ミニウィンドウに対するアニメーションの処理
|
|
218
|
+
$(function () {
|
|
219
|
+
// 各セクションの画像処理を開始
|
|
220
|
+
animateImages('.pile_zipup_blouson .mini_window_icon_wrap img');
|
|
221
|
+
animateImages('.border_tee .mini_window_icon_wrap img');
|
|
222
|
+
animateImages('.hoodie_sweatshirts .mini_window_icon_wrap img');
|
|
223
|
+
|
|
224
|
+
function animateImages(selector) {
|
|
225
|
+
var images = $(selector);
|
|
226
|
+
var currentIndex = 0;
|
|
227
|
+
var animationDirection = 'forward';
|
|
228
|
+
|
|
229
|
+
function showImage(index) {
|
|
230
|
+
$(images[index]).addClass('active').show();
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
function hideImage(index) {
|
|
234
|
+
$(images[index]).removeClass('active').hide();
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
function animate() {
|
|
238
|
+
setTimeout(function () {
|
|
239
|
+
if (animationDirection === 'forward') {
|
|
240
|
+
if (currentIndex < images.length - 1) {
|
|
241
|
+
hideImage(currentIndex);
|
|
242
|
+
currentIndex++;
|
|
243
|
+
animate();
|
|
244
|
+
} else {
|
|
245
|
+
animationDirection = 'backward';
|
|
246
|
+
currentIndex = images.length - 2;
|
|
247
|
+
setTimeout(hideImageStep, 150);
|
|
248
|
+
}
|
|
249
|
+
} else {
|
|
250
|
+
if (currentIndex >= 0) {
|
|
251
|
+
showImage(currentIndex);
|
|
252
|
+
currentIndex--;
|
|
253
|
+
animate();
|
|
254
|
+
} else {
|
|
255
|
+
animationDirection = 'forward';
|
|
256
|
+
currentIndex = 1;
|
|
257
|
+
setTimeout(showImageStep, 150);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}, 300);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
function hideImageStep() {
|
|
264
|
+
if (currentIndex >= 0) {
|
|
265
|
+
hideImage(currentIndex);
|
|
266
|
+
currentIndex--;
|
|
267
|
+
if (currentIndex >= 0) {
|
|
268
|
+
setTimeout(hideImageStep, 150);
|
|
269
|
+
} else {
|
|
270
|
+
currentIndex = images.length - 1;
|
|
271
|
+
animate();
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
function showImageStep() {
|
|
277
|
+
if (currentIndex < images.length) {
|
|
278
|
+
showImage(currentIndex);
|
|
279
|
+
currentIndex++;
|
|
280
|
+
if (currentIndex < images.length - 1) {
|
|
281
|
+
setTimeout(showImageStep, 150);
|
|
282
|
+
} else {
|
|
283
|
+
currentIndex = 0;
|
|
284
|
+
setTimeout(animate, 150);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
images.each(function (index) {
|
|
290
|
+
if (index >= 1 && index < images.length - 1) {
|
|
291
|
+
hideImage(index);
|
|
292
|
+
}
|
|
293
|
+
});
|
|
294
|
+
showImage(images.length - 1);
|
|
295
|
+
setTimeout(animate, 0);
|
|
296
|
+
}
|
|
297
|
+
});
|
|
298
|
+
```
|
|
299
|
+
|
2
実現したいことに、図解を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
|
+
|
|
2
3
|
①画面を描画したら、すぐにアニメーションの処理を開始。
|
|
3
4
|
②最初はmini_window_icon_wrap内の3枚の画像を表示しておき、一番上に重ねている1枚目の画像から2枚目までを順番に非表示にする処理を行う。3枚目にはアニメーションを適用しない。
|
|
4
5
|
③上記の非表示処理が終わったとき、3枚目の画像は表示したままの状態が正しい。
|
1
表記揺れの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
※参考動画
|
|
88
88
|
https://capture.dropbox.com/4rAH2Khu6SoOcluI
|
|
89
89
|
|
|
90
|
-
Cで
|
|
90
|
+
Cで実現できていないこと：
|
|
91
91
|
②最初は非表示の処理から開始したいが、一番下の3枚目のみが最初に表示されていて、④の表示の処理から開始してしまっている。
|
|
92
92
|
|
|
93
93
|
※参考動画：
|