teratail
回答率
85.48%
質問するログイン新規登録
トップHTML5に関する質問jqueryのanimateについて

編集履歴

回答編集履歴

11

マークダウン修正

2015/10/31 19:23

投稿

退会済みユーザー
test CHANGED
@@ -294,7 +294,7 @@
294
294
 
295
295
  $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 1000}, function () {
296
296
 
297
- ``` $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000});
297
+ $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000});
298
298
 
299
299
  });
300
300
 

10

修正

2015/10/31 19:23

投稿

退会済みユーザー
test CHANGED
@@ -294,7 +294,7 @@
294
294
 
295
295
  $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 1000}, function () {
296
296
 
297
- $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000});
297
+ ``` $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000});
298
298
 
299
299
  });
300
300
 
@@ -307,3 +307,39 @@
307
307
  });
308
308
 
309
309
  ```
310
+
311
+
312
+
313
+ ###間違いがあったので修正
314
+
315
+ ```javascript
316
+
317
+ <script type="text/javascript">
318
+
319
+ $(function () {
320
+
321
+ var method1 = "easeOutElastic";
322
+
323
+ $(".main .a").fadeIn(2000, function () {
324
+
325
+ $(this).animate({top: 100, marginLeft: 60, bottom: 0}, 800, method1, function () {
326
+
327
+ $(this).animate({marginLeft: 60}, 1000, method1, function () {
328
+
329
+ $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 1000}, function () {
330
+
331
+ $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000});
332
+
333
+ });
334
+
335
+ });
336
+
337
+ });
338
+
339
+ });
340
+
341
+ });
342
+
343
+ </script>
344
+
345
+ ```

9

追記

2015/10/31 02:28

投稿

退会済みユーザー
test CHANGED
@@ -271,3 +271,39 @@
271
271
  </html>
272
272
 
273
273
  ```
274
+
275
+
276
+
277
+ 動きを見やすくするため、duration を 1000 にしてみた
278
+
279
+
280
+
281
+ ```javascript
282
+
283
+
284
+
285
+ $(function () {
286
+
287
+ var method1 = "easeOutElastic";
288
+
289
+ $(".main .a").fadeIn(2000, function () {
290
+
291
+ $(".main .a").animate({top: 100, marginLeft: 60, bottom: 0}, 800, method1, function () {
292
+
293
+ $(this).animate({marginLeft: 60}, 1000, method1, function () {
294
+
295
+ $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 1000}, function () {
296
+
297
+ $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000});
298
+
299
+ });
300
+
301
+ });
302
+
303
+ });
304
+
305
+ });
306
+
307
+ });
308
+
309
+ ```

8

追記

2015/10/31 01:18

投稿

退会済みユーザー
test CHANGED
@@ -173,3 +173,101 @@
173
173
  [jquery.transition.js](https://github.com/louisremi/jquery.transition.js/blob/master/jquery.transition.js)
174
174
 
175
175
  [jquery.transit](https://github.com/rstacruz/jquery.transit)
176
+
177
+
178
+
179
+
180
+
181
+ ###とどのつまりはこういう風にしたいのではと推測して書いてみました
182
+
183
+
184
+
185
+ そのままコピペで動くと思います。当方、Mac のため IE での動作検証はできません、あしからず…
186
+
187
+ http でアクセスする場合は https を http に変更してください。
188
+
189
+
190
+
191
+ jquery.transition.js にはどうも transition メソッドないようなので、jquery.transit を使っております。
192
+
193
+
194
+
195
+ ```html
196
+
197
+ <!DOCTYPE HTML>
198
+
199
+ <html lang="ja-JP">
200
+
201
+ <head>
202
+
203
+ <meta charset="UTF-8">
204
+
205
+ <title></title>
206
+
207
+ <style type="text/css">
208
+
209
+ .a {
210
+
211
+ position: absolute;
212
+
213
+ display: none;
214
+
215
+ top: -220px;
216
+
217
+ }
218
+
219
+ </style>
220
+
221
+ </head>
222
+
223
+ <body>
224
+
225
+
226
+
227
+ <div class="main">
228
+
229
+ <img class="a" src="https://dummyimage.com/100x100/000/fff" alt="ロゴ" />
230
+
231
+ </div>
232
+
233
+
234
+
235
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
236
+
237
+ <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
238
+
239
+ <script type="text/javascript" src="https://raw.githubusercontent.com/rstacruz/jquery.transit/master/jquery.transit.js"></script>
240
+
241
+ <script type="text/javascript">
242
+
243
+ $(function () {
244
+
245
+ var method1 = "easeOutElastic";
246
+
247
+ $(".main .a").fadeIn(2000, function () {
248
+
249
+ $(".main .a").animate({top: 100, marginLeft: 60, bottom: 0}, 800, method1, function () {
250
+
251
+ $(this).animate({marginLeft: 60}, 100, method1, function () {
252
+
253
+ $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 100}, function () {
254
+
255
+ $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 100});
256
+
257
+ });
258
+
259
+ });
260
+
261
+ });
262
+
263
+ });
264
+
265
+ });
266
+
267
+ </script>
268
+
269
+ </body>
270
+
271
+ </html>
272
+
273
+ ```

7

追記

2015/10/31 00:52

投稿

退会済みユーザー
test CHANGED
@@ -117,3 +117,59 @@
117
117
 
118
118
 
119
119
  ブラウザの動き自体からは判断できない潜在的な不具合も事前に防止することができます。
120
+
121
+
122
+
123
+ ---
124
+
125
+
126
+
127
+ ```javascript
128
+
129
+ $(".main .a").transition({scaleX: 1.5, scaleX:1.5, duration: 100}, {scaleY: 1.5, scaleY:1.5, duration: 100});
130
+
131
+ $(".main .a").transition({scaleY: 1.5, scaleY:1.5, duration: 100}, {scaleX: 1.5, scaleX:1.5, duration: 100});
132
+
133
+ $(".main .a").transition({scaleY: 1.0, scaleY:1.0, duration: 100}, {scaleX: 1.0, scaleX:1.0, duration: 100});
134
+
135
+ $(".main .a").transition({scaleX: 1.0, scaleX:1.0, duration: 100}, {scaleY: 1.0, scaleY:1.0, duration: 100});
136
+
137
+ ```
138
+
139
+
140
+
141
+ この部分、**同じプロパティが二重に設定さてれいる**のは正しい使い方なのだろうか。
142
+
143
+
144
+
145
+ ```javascript
146
+
147
+ $(".main .a").transition({scaleX:1.5, duration: 100}, {scaleY:1.5, duration: 100});
148
+
149
+ $(".main .a").transition({scaleY:1.5, duration: 100}, {scaleX:1.5, duration: 100});
150
+
151
+ $(".main .a").transition({scaleY:1.0, duration: 100}, {scaleX:1.0, duration: 100});
152
+
153
+ $(".main .a").transition({scaleX:1.0, duration: 100}, {scaleY:1.0, duration: 100});
154
+
155
+ ```
156
+
157
+
158
+
159
+ こうではないだろうか
160
+
161
+
162
+
163
+ あと、この4行はほぼ同時に実行されるので、一つ目の処理の終了を待たずに次が実行されるのでは？
164
+
165
+ 現時点で、何のプラグインを使っているのかわからないので推測です。コールバックが用意されているのであればそれを使うか、メソッドチェーンで実装が正解か。これも推測。
166
+
167
+
168
+
169
+ 以下のどちらも「transition」メソッドを使うようなので…
170
+
171
+
172
+
173
+ [jquery.transition.js](https://github.com/louisremi/jquery.transition.js/blob/master/jquery.transition.js)
174
+
175
+ [jquery.transit](https://github.com/rstacruz/jquery.transit)

6

tuiki

2015/10/31 00:12

投稿

退会済みユーザー
test CHANGED
File without changes

5

追記

2015/10/30 23:57

投稿

退会済みユーザー
test CHANGED
@@ -103,3 +103,17 @@
103
103
  **「自分の書いたすべてのソースコードについて説明できるように」**しましょう。
104
104
 
105
105
 
106
+
107
+ ###JavaScript のデバッグについて
108
+
109
+
110
+
111
+ 闇雲にソースをいじるのは、デバッグの方法としてナンセンスですし、何より時間の無駄ですから、「開発ツール」を使いこなしてください。
112
+
113
+
114
+
115
+ [F12 開発者ツールを使用して JavaScript エラーをデバッグする](https://msdn.microsoft.com/ja-jp/library/gg699336%28v=vs.85%29.aspx)
116
+
117
+
118
+
119
+ ブラウザの動き自体からは判断できない潜在的な不具合も事前に防止することができます。

4

追記

2015/10/30 23:28

投稿

退会済みユーザー
test CHANGED
@@ -91,3 +91,15 @@
91
91
  </script>
92
92
 
93
93
  ```
94
+
95
+
96
+
97
+ 率直な感想を言うと…ネットで寄せ集めたコードを秩序なくただ書いてみただけという印象です。
98
+
99
+ 決められたルールに則って書かないと、動くわけがありません。
100
+
101
+
102
+
103
+ **「自分の書いたすべてのソースコードについて説明できるように」**しましょう。
104
+
105
+

3

訂正

2015/10/30 23:08

投稿

退会済みユーザー
test CHANGED
@@ -56,12 +56,6 @@
56
56
 
57
57
 
58
58
 
59
-
60
-
61
- //ここから以下全て間違い。
62
-
63
- //jQuery に transition というメソッドは存在しない
64
-
65
59
  $(".main .a").animate(
66
60
 
67
61
  {top: 100, marginLeft: 60, bottom: 0, }

2

タイポ修正

2015/10/30 22:49

投稿

退会済みユーザー
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- コードからは、同意として書いて記述なのか推測できない部分もあるので、おかしいところをコメントで記述しました。
23
+ コードからは、どう意図して書いて記述なのか推測できない部分もあるので、おかしいところをコメントで記述しました。
24
24
 
25
25
 
26
26
 

1

追記

2015/10/30 22:46

投稿

退会済みユーザー
test CHANGED
@@ -13,3 +13,87 @@
13
13
  あと、現象が発生するブラウザの種類とバージョンは？
14
14
 
15
15
  最低限、IE（IEの場合はバージョンも）、Chrome、Firefox など数種類の実行結果を書いてください。
16
+
17
+
18
+
19
+ ---
20
+
21
+
22
+
23
+ コードからは、同意として書いて記述なのか推測できない部分もあるので、おかしいところをコメントで記述しました。
24
+
25
+
26
+
27
+ ```javascript
28
+
29
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
30
+
31
+ <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
32
+
33
+ <script type="text/javascript">
34
+
35
+ $(function () {
36
+
37
+
38
+
39
+ $(".main .a").css({
40
+
41
+ top: '-220px'
42
+
43
+ });
44
+
45
+ //$(window).bind("load", function(){　 // 不要 $(function () {で同じ役目
46
+
47
+ $(".main .a").fadeIn(2000);
48
+
49
+ this.blur(); // this がさす内容不明。 documentに成るだろうけど…何の意味？？？
50
+
51
+ //
52
+
53
+ var method1 = "easeOutElastic";
54
+
55
+ //var method2 = "easeInBounce";
56
+
57
+
58
+
59
+
60
+
61
+ //ここから以下全て間違い。
62
+
63
+ //jQuery に transition というメソッドは存在しない
64
+
65
+ $(".main .a").animate(
66
+
67
+ {top: 100, marginLeft: 60, bottom: 0, }
68
+
69
+ // , {duration: 800, easing: method1 = 'easeOutElastic'} // ここで代入する意味ない
70
+
71
+ , {duration: 800, easing: method1}
72
+
73
+ ).animate({marginLeft: 60} // 文法上許容されるブラウザもあるが、配列の最後のカンマは不具合の元
74
+
75
+ //, {duration: 100, easing: method1 = 'easeOutElastic'}// ここで代入する意味ない
76
+
77
+ , {duration: 100, easing: method1}
78
+
79
+ );
80
+
81
+ //jQuery に transition というメソッドは存在しない。
82
+
83
+ //なので、以下全部間違い
84
+
85
+ //何を意図したコードなのかわからないので、コメントなし。
86
+
87
+ // $(".main .a").transition({scaleX: 1.5, scaleX:1.5, duration: 100}, {scaleY: 1.5, scaleY:1.5, duration: 100});
88
+
89
+ // $(".main .a").transition({scaleY: 1.5, scaleY:1.5, duration: 100}, {scaleX: 1.5, scaleX:1.5, duration: 100});
90
+
91
+ // $(".main .a").transition({scaleY: 1.0, scaleY:1.0, duration: 100}, {scaleX: 1.0, scaleX:1.0, duration: 100});
92
+
93
+ // $(".main .a").transition({scaleX: 1.0, scaleX:1.0, duration: 100}, {scaleY: 1.0, scaleY:1.0, duration: 100});
94
+
95
+ });
96
+
97
+ </script>
98
+
99
+ ```