teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jQueryでアニメーションGIF再生中にそのGIFをクリックすると頭から再生されてしまう。

編集履歴

質問編集履歴

9

修正

2018/11/12 10:07

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -73,5 +73,5 @@
73
73
  .on() .off()でできましたが、
74
74
  これだけだとclickが1回きりになってしまい、クリックイベントの復活のさせ方がわかりません。
75
75
  アニメーションGIF再生中はクリックしても何も起こらないが、
76
+ 再生後は見た目上順番１に戻り、
76
- 再生後はふたたびクリックできるようにして、
77
+ 再生ボタンが再びクリックできるようにしたいです。
77
- 見た目は順番1に戻ったような感じにしたいです。

8

修正

2018/11/12 10:07

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -69,9 +69,6 @@
69
69
  });
70
70
  ```
71
71
 
72
-
73
- $('#btnImg').click() {
74
- $('#changeImg').attr({'src': '02.gif'});
75
72
  clickを制御するものがないからかなと思い、
76
73
  .on() .off()でできましたが、
77
74
  これだけだとclickが1回きりになってしまい、クリックイベントの復活のさせ方がわかりません。

7

文章の修正

2018/11/12 09:53

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -72,9 +72,9 @@
72
72
 
73
73
  $('#btnImg').click() {
74
74
  $('#changeImg').attr({'src': '02.gif'});
75
- のところに制御するものがないからかな、と思い、
75
+ clickを制御するものがないからかなと思い、
76
- 試しに.on .off .one など使ったら再生されなくなりました。
76
+ .on() .off()でできましたが、
77
- ただ、これだとclickが1回きりになってしまうので
77
+ これだけだとclickが1回きりになってしまい、クリックイベントの復活のさせ方がわかりません。
78
- 順番１に戻ったときにリロードしないとclickできません。
79
- アニメーションGIFの再生時だけclickできないようにしたいのです。
78
+ アニメーションGIF再生中はクリックしても何も起こらないが、
79
+ 再生後はふたたびクリックできるようにして、
80
- if文を使うのでしょうか？if文はまだ使い方がわかりません。。。
80
+ 見た目は順番1に戻ったような感じにしたいです。

6

インデント

2018/11/12 09:38

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -36,31 +36,37 @@
36
36
 
37
37
 
38
38
  `````ここに言語を入力
39
- $(function(){
39
+ $(function() {
40
+ $("#btnImg").css({ opacity: ".65" });
40
41
 
42
+ $("#btnImg").hover(
43
+ function() {
44
+ $(this)
45
+ .stop()
46
+ .animate({ opacity: "1" });
47
+ },
48
+ function() {
49
+ $(this)
50
+ .stop()
51
+ .animate({ opacity: ".65" });
52
+ }
53
+ );
41
54
 
42
- $('#btnImg').css({ opacity : '.65' });
55
+ $("#btnImg").css("cursor", "pointer");
43
56
 
57
+ $("#btnImg").on('click', function() {
58
+ $("#changeImg").attr({ src: "02.gif" });
44
- $('#btnImg').hover(
59
+ $("#btnImg").removeAttr("src");
45
- function(){ $(this).stop().animate({ opacity : '1' }); },
46
- function(){ $(this).stop().animate({ opacity : '.65' }); }
60
+ $("#btnImg").css("cursor", "auto");
47
- );
48
61
 
62
+ setTimeout(function() {
63
+ $("#changeImg").attr({ src: "01.jpg" });
64
+ $("#btnImg").attr({ src: "03.png" });
49
- $('#btnImg').css('cursor','pointer');
65
+ $("#btnImg").css({ opacity: ".65" });
66
+ }, 5000);
50
67
 
51
- $('#btnImg').click(function() {
52
- $('#changeImg').attr({'src': '02.gif'});
53
- $('#btnImg').removeAttr('src');
54
-
55
- setTimeout(function() {
56
- $('#changeImg').attr({'src': '01.jpg'});
57
- $('#btnImg').attr({'src': '03.png'});
58
- $('#btnImg').css({ opacity : '.65' });
59
- }, 5000);
68
+ });
60
-
61
69
  });
62
-
63
- });
64
70
  ```
65
71
 
66
72
 

5

追記

2018/11/12 09:32

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -61,4 +61,14 @@
61
61
  });
62
62
 
63
63
  });
64
- ```
64
+ ```
65
+
66
+
67
+ $('#btnImg').click() {
68
+ $('#changeImg').attr({'src': '02.gif'});
69
+ のところに制御するものがないからかな、と思い、
70
+ 試しに.on .off .one など使ったら再生されなくなりました。
71
+ ただ、これだとclickが1回きりになってしまうので
72
+ 順番１に戻ったときにリロードしないとclickできません。
73
+ アニメーションGIFの再生時だけclickできないようにしたいのです。
74
+ if文を使うのでしょうか？if文はまだ使い方がわかりません。。。

4

書式

2018/11/12 05:18

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -22,6 +22,19 @@
22
22
  初心者で処理ごとに書かないと頭が混乱するので
23
23
  セレクタのthisやメソッドチェーンなど、ソースを省略することは
24
24
  あとでやりたいと思います。
25
+
26
+ ```ここに言語を入力
27
+ <body>
28
+
29
+ <div class="relative">
30
+ <img id="changeImg" src="01.jpg">
31
+ <img id="btnImg" class="absolute" src="03.png">
32
+ </div>
33
+
34
+ </body>
35
+ ```
36
+
37
+
25
38
  `````ここに言語を入力
26
39
  $(function(){
27
40
 

3

マークダウン

2018/11/12 04:11

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -22,8 +22,7 @@
22
22
  初心者で処理ごとに書かないと頭が混乱するので
23
23
  セレクタのthisやメソッドチェーンなど、ソースを省略することは
24
24
  あとでやりたいと思います。
25
-
25
+ `````ここに言語を入力
26
-
27
26
  $(function(){
28
27
 
29
28
 
@@ -48,4 +47,5 @@
48
47
 
49
48
  });
50
49
 
51
- });
50
+ });
51
+ ```

2

修正

2018/11/12 04:08

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  1　静止画（01.jpg）を表示
7
7
  2　静止画の上下左右中央に再生ボタン(#btnImg、03.png)が配置されています。
8
- 3 03.pngのボタンはマウスオーバーで透過したりカーソルが指アイコンになったりします。
8
+ 3 03.pngのボタンはマウスオーバーで透過状態に変化があったりカーソルが指アイコンになったりします。
9
9
  4　再生ボタンをクリックするとアニメーションGIF(02.gif)が再生されます。
10
10
  5 アニメーションGIF再生中はボタン(03.png)が消えます。
11
11
 

1

補足

2018/11/12 03:27

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -12,6 +12,8 @@
12
12
  このとき、再生中のアニメーションGIF(02.gif)をクリックしてしまうと、
13
13
  アニメーションが最初から再生されます。
14
14
  クリックしても無視して再生が終了するようにしたいです。
15
+ 02.gifそのものはループなしで設定されたアニメーションGIFで、
16
+ 単体で表示する分には途中でクリックしても頭に戻ることはありません。
15
17
 
16
18
  6　再生ボタンをクリックしてから指定時間（5秒）が過ぎると
17
19
  　　１の静止画にボタンが乗っている状態に戻ります。