質問編集履歴

2

ついか「

2020/05/22 14:58

投稿

KY1212
KY1212

スコア17

test CHANGED
File without changes
test CHANGED
@@ -188,70 +188,72 @@
188
188
 
189
189
  ```
190
190
 
191
+ ```
192
+
193
+ <body>
194
+
195
+ <header>
196
+
197
+ <h1>study jQuery</h1>
198
+
199
+ </header>
200
+
201
+ <section id="firstView">
202
+
203
+ <div class="inner">
204
+
205
+ <ul>
206
+
207
+ <li>
208
+
209
+ <p>
210
+
211
+ <img src="img/01_img.jpg">
212
+
213
+ <strong>Bird-1</strong><span></span>
214
+
215
+ </p>
216
+
217
+ </li>
218
+
219
+ <li>
220
+
221
+ <p>
222
+
223
+ <img src="img/02_img.jpg">
224
+
225
+ <strong>Bird-2</strong><span></span>
226
+
227
+ </p>
228
+
229
+ </li>
230
+
231
+ <li>
232
+
233
+ <p>
234
+
235
+ <img src="img/03_img.jpg">
236
+
237
+ <strong>Bird-3</strong><span></span>
238
+
239
+ </p>
240
+
241
+ </li>
242
+
243
+ </ul>
244
+
245
+ </div>
246
+
247
+ </section>
248
+
249
+ </body>
250
+
251
+ ```
252
+
253
+
254
+
191
255
  ```ここに言語を入力
192
256
 
193
- <body>
194
-
195
- <header>
196
-
197
- <h1>study jQuery</h1>
198
-
199
- </header>
200
-
201
- <section id="firstView">
202
-
203
- <div class="inner">
204
-
205
- <ul>
206
-
207
- <li>
208
-
209
- <p>
210
-
211
- <img src="img/01_img.jpg">
212
-
213
- <strong>Bird-1</strong><span></span>
214
-
215
- </p>
216
-
217
- </li>
218
-
219
- <li>
220
-
221
- <p>
222
-
223
- <img src="img/02_img.jpg">
224
-
225
- <strong>Bird-2</strong><span></span>
226
-
227
- </p>
228
-
229
- </li>
230
-
231
- <li>
232
-
233
- <p>
234
-
235
- <img src="img/03_img.jpg">
236
-
237
- <strong>Bird-3</strong><span></span>
238
-
239
- </p>
240
-
241
- </li>
242
-
243
- </ul>
244
-
245
- </div>
246
-
247
- </section>
248
-
249
- </body>
250
-
251
-
252
-
253
- ```ここに言語を入力
254
-
255
257
  $(function(){
256
258
 
257
259
  var duration = 300;
@@ -288,6 +290,6 @@
288
290
 
289
291
  ```
290
292
 
291
- ```
293
+
292
294
 
293
295
  ![イ![イメージ説明](2339026febffa50868ec24c6abb5f3df.png)(28005ebf0b713ae778848eb6882ad6ff.png)

1

ついか

2020/05/22 14:57

投稿

KY1212
KY1212

スコア17

test CHANGED
File without changes
test CHANGED
@@ -248,6 +248,46 @@
248
248
 
249
249
  </body>
250
250
 
251
+
252
+
253
+ ```ここに言語を入力
254
+
255
+ $(function(){
256
+
257
+ var duration = 300;
258
+
259
+ var $firstView = $("firstView, li");
260
+
261
+
262
+
263
+ $firstView.filter(':nth-child(3)')
264
+
265
+ .on('mouseover', function(){
266
+
267
+ $(this).find('strong').stop(true).animate({bottom: '0px'}, duration);
268
+
269
+ $(this).find('span').stop(true).animate({opacity: 1}, duration);
270
+
271
+ $(this).find('img').stop(true).animate({top: '-20px'}, duration * 1.3);
272
+
273
+ })
274
+
275
+ .on('mouseout', function(){
276
+
277
+ $(this).find('strong').stop(true).animate({bottom: '-120px'}, duration);
278
+
279
+ $(this).find('span').stop(true).animate({opacity: 0}, duration);
280
+
281
+ $(this).find('img').stop(true).animate({top: '0px'}, duration);
282
+
283
+ });
284
+
285
+
286
+
287
+ });
288
+
251
289
  ```
252
290
 
291
+ ```
292
+
253
293
  ![イ![イメージ説明](2339026febffa50868ec24c6abb5f3df.png)(28005ebf0b713ae778848eb6882ad6ff.png)