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

編集履歴

質問編集履歴

9

修正

2018/11/12 10:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -148,6 +148,6 @@
148
148
 
149
149
  アニメーションGIF再生中はクリックしても何も起こらないが、
150
150
 
151
- 再生後はふたたびクリックできるようにして、
151
+ 再生後は見た目上順番１に戻り、
152
152
 
153
- 見た目は順番1に戻ったような感じにしたいです。
153
+ 再生ボタンが再びクリックできるようにしたいです。

8

修正

2018/11/12 10:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -140,12 +140,6 @@
140
140
 
141
141
 
142
142
 
143
-
144
-
145
- $('#btnImg').click() {
146
-
147
- $('#changeImg').attr({'src': '02.gif'});
148
-
149
143
  clickを制御するものがないからかなと思い、
150
144
 
151
145
  .on() .off()でできましたが、

7

文章の修正

2018/11/12 09:53

投稿

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

6

インデント

2018/11/12 09:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -74,53 +74,65 @@
74
74
 
75
75
  `````ここに言語を入力
76
76
 
77
- $(function(){
77
+ $(function() {
78
+
79
+ $("#btnImg").css({ opacity: ".65" });
78
80
 
79
81
 
80
82
 
83
+ $("#btnImg").hover(
81
84
 
85
+ function() {
82
86
 
87
+ $(this)
88
+
89
+ .stop()
90
+
91
+ .animate({ opacity: "1" });
92
+
93
+ },
94
+
95
+ function() {
96
+
97
+ $(this)
98
+
99
+ .stop()
100
+
83
- $('#btnImg').css({ opacity : '.65' });
101
+ .animate({ opacity: ".65" });
102
+
103
+ }
104
+
105
+ );
84
106
 
85
107
 
86
108
 
87
- $('#btnImg').hover(
88
-
89
- function(){ $(this).stop().animate({ opacity : '1' }); },
90
-
91
- function(){ $(this).stop().animate({ opacity : '.65' }); }
109
+ $("#btnImg").css("cursor", "pointer");
92
-
93
- );
94
110
 
95
111
 
96
112
 
113
+ $("#btnImg").on('click', function() {
114
+
115
+ $("#changeImg").attr({ src: "02.gif" });
116
+
117
+ $("#btnImg").removeAttr("src");
118
+
97
- $('#btnImg').css('cursor','pointer');
119
+ $("#btnImg").css("cursor", "auto");
98
120
 
99
121
 
100
122
 
101
- $('#btnImg').click(function() {
123
+ setTimeout(function() {
102
124
 
103
- $('#changeImg').attr({'src': '02.gif'});
125
+ $("#changeImg").attr({ src: "01.jpg" });
104
126
 
127
+ $("#btnImg").attr({ src: "03.png" });
128
+
105
- $('#btnImg').removeAttr('src');
129
+ $("#btnImg").css({ opacity: ".65" });
130
+
131
+ }, 5000);
106
132
 
107
133
 
108
134
 
109
- setTimeout(function() {
110
-
111
- $('#changeImg').attr({'src': '01.jpg'});
112
-
113
- $('#btnImg').attr({'src': '03.png'});
114
-
115
- $('#btnImg').css({ opacity : '.65' });
116
-
117
- }, 5000);
118
-
119
-
120
-
121
- });
135
+ });
122
-
123
-
124
136
 
125
137
  });
126
138
 

5

追記

2018/11/12 09:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -125,3 +125,23 @@
125
125
  });
126
126
 
127
127
  ```
128
+
129
+
130
+
131
+
132
+
133
+ $('#btnImg').click() {
134
+
135
+ $('#changeImg').attr({'src': '02.gif'});
136
+
137
+ のところに制御するものがないからかな、と思い、
138
+
139
+ 試しに.on .off .one など使ったら再生されなくなりました。
140
+
141
+ ただ、これだとclickが1回きりになってしまうので
142
+
143
+ 順番１に戻ったときにリロードしないとclickできません。
144
+
145
+ アニメーションGIFの再生時だけclickできないようにしたいのです。
146
+
147
+ if文を使うのでしょうか？if文はまだ使い方がわかりません。。。

4

書式

2018/11/12 05:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -45,6 +45,32 @@
45
45
  セレクタのthisやメソッドチェーンなど、ソースを省略することは
46
46
 
47
47
  あとでやりたいと思います。
48
+
49
+
50
+
51
+ ```ここに言語を入力
52
+
53
+ <body>
54
+
55
+
56
+
57
+ <div class="relative">
58
+
59
+ <img id="changeImg" src="01.jpg">
60
+
61
+ <img id="btnImg" class="absolute" src="03.png">
62
+
63
+ </div>
64
+
65
+
66
+
67
+ </body>
68
+
69
+ ```
70
+
71
+
72
+
73
+
48
74
 
49
75
  `````ここに言語を入力
50
76
 

3

マークダウン

2018/11/12 04:11

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -46,9 +46,7 @@
46
46
 
47
47
  あとでやりたいと思います。
48
48
 
49
-
49
+ `````ここに言語を入力
50
-
51
-
52
50
 
53
51
  $(function(){
54
52
 
@@ -99,3 +97,5 @@
99
97
 
100
98
 
101
99
  });
100
+
101
+ ```

2

修正

2018/11/12 04:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  2　静止画の上下左右中央に再生ボタン(#btnImg、03.png)が配置されています。
14
14
 
15
- 3 03.pngのボタンはマウスオーバーで透過したりカーソルが指アイコンになったりします。
15
+ 3 03.pngのボタンはマウスオーバーで透過状態に変化があったりカーソルが指アイコンになったりします。
16
16
 
17
17
  4　再生ボタンをクリックするとアニメーションGIF(02.gif)が再生されます。
18
18
 

1

補足

2018/11/12 03:27

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -25,6 +25,10 @@
25
25
  アニメーションが最初から再生されます。
26
26
 
27
27
  クリックしても無視して再生が終了するようにしたいです。
28
+
29
+ 02.gifそのものはループなしで設定されたアニメーションGIFで、
30
+
31
+ 単体で表示する分には途中でクリックしても頭に戻ることはありません。
28
32
 
29
33
 
30
34