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

編集履歴

質問編集履歴

6

訂正

2015/10/30 21:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -35,3 +35,79 @@
35
35
  どなたか解る方がおられましたら ご教授頂けますと幸いです。
36
36
 
37
37
  宜しくお願い致します。
38
+
39
+
40
+
41
+ 追記 自分の書いたscriptはこちらです↓
42
+
43
+ よろしくお願いします。
44
+
45
+
46
+
47
+ $(function(){
48
+
49
+
50
+
51
+
52
+
53
+ $(".main .a").css({
54
+
55
+ top: '-220px',
56
+
57
+ //width: '220',
58
+
59
+ //height: '219'
60
+
61
+
62
+
63
+ });
64
+
65
+
66
+
67
+
68
+
69
+
70
+
71
+ //$(".main .b").css({
72
+
73
+ // right: '500px'
74
+
75
+ // });//
76
+
77
+
78
+
79
+ $(window).bind("load",function(){
80
+
81
+ $(".main .a").fadeIn(2000);
82
+
83
+ //e.preventDefault();
84
+
85
+ this.blur();
86
+
87
+ // var el = $('#' + this.href.split('#')[1]);
88
+
89
+ var method1 = "easeOutElastic";
90
+
91
+ //var method2 = "easeInBounce";
92
+
93
+
94
+
95
+ $(".main .a").animate({top: 100, marginLeft: 60, bottom: 0, },{duration: 800, easing: method1 ='easeOutElastic'})
96
+
97
+ .animate({marginLeft: 60, }, {duration: 100, easing: method1 ='easeOutElastic'});
98
+
99
+ $(".main .a").transition({ scaleX:1.5, scaleX:1.5, duration: 100 },{ scaleY:1.5, scaleY:1.5, duration: 100 });$(".main .a").transition({ scaleY:1.5, scaleY:1.5, duration: 100 },{ scaleX:1.5, scaleX:1.5, duration: 100 });$(".main .a").transition({ scaleY:1.0, scaleY:1.0, duration: 100 },{ scaleX:1.0, scaleX:1.0, duration: 100 });$(".main .a").transition({ scaleX:1.0, scaleX:1.0, duration: 100 },{ scaleY:1.0, scaleY:1.0, duration: 100 });
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+ });
108
+
109
+
110
+
111
+ 色々 コメントアウトしつつ 試行錯誤しているため
112
+
113
+ 少し ごたついています すみません。（＞＜。）

5

訂正

2015/10/30 21:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -35,59 +35,3 @@
35
35
  どなたか解る方がおられましたら ご教授頂けますと幸いです。
36
36
 
37
37
  宜しくお願い致します。
38
-
39
-
40
-
41
-
42
-
43
- 上記に関しまして
44
-
45
- Windows７の時には上記の現象が起きていたのですが 10にアップデート
46
-
47
- したところ ブラウザがHTML5に対応したのか現象が起きなくなりました。
48
-
49
-
50
-
51
- 下記の方にも伺っておりますが…
52
-
53
-
54
-
55
- 今度はScriptの書き換えに手こずっています。
56
-
57
-
58
-
59
- 正方形の画像を2枚使用し １枚を画像ｂとします 画像ｂは常にブラウザの画面
60
-
61
- 左上に固定 もう１枚は画像aとして ブラウザの外からフェードインするように
62
-
63
- 位置を設定しています。
64
-
65
-
66
-
67
- 画像ｂをクリックすると 画像aがブラウザの外から落下（フェードイン）
68
-
69
- するように記述し成功したのですが。
70
-
71
- 画像ｂをクリックせず 画像aをフェードインさせる記述に変えてみたのですが
72
-
73
- $(window).bind("load",function(){
74
-
75
- $(".main .a").fadeIn(2000); としたところ
76
-
77
-
78
-
79
- 画像がwindow load終了時に 間髪入れず画像が現れる（落下してくる）ように
80
-
81
- なってしまいました。
82
-
83
-
84
-
85
- 画像がwindow load終了時に 一呼吸おいてから
86
-
87
- 画像が落ちてくるようにするには どのように記述すれば良いのでしょうか？
88
-
89
-
90
-
91
- という質問です 連投してしまい すみません。
92
-
93
- ご回答を宜しくお願い致します。

4

説明　訂正・追記

2015/10/30 21:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -68,9 +68,23 @@
68
68
 
69
69
  するように記述し成功したのですが。
70
70
 
71
- 画像ｂをクリックせず 画像aをフェードインさせる記述がわかりません
71
+ 画像ｂをクリックせず 画像aをフェードインさせる記述に変えてみたのですが
72
72
 
73
+ $(window).bind("load",function(){
74
+
75
+ $(".main .a").fadeIn(2000); としたところ
76
+
77
+
78
+
79
+ 画像がwindow load終了時に 間髪入れず画像が現れる（落下してくる）ように
80
+
81
+ なってしまいました。
82
+
83
+
84
+
85
+ 画像がwindow load終了時に 一呼吸おいてから
86
+
73
- .auto(function){ 的な記述をすれば良いのでしょうか？
87
+ 画像が落ちてくるようにするには どのように記述すれば良いのでしょうか？
74
88
 
75
89
 
76
90
 

3

追記

2015/10/30 21:21

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -35,3 +35,45 @@
35
35
  どなたか解る方がおられましたら ご教授頂けますと幸いです。
36
36
 
37
37
  宜しくお願い致します。
38
+
39
+
40
+
41
+
42
+
43
+ 上記に関しまして
44
+
45
+ Windows７の時には上記の現象が起きていたのですが 10にアップデート
46
+
47
+ したところ ブラウザがHTML5に対応したのか現象が起きなくなりました。
48
+
49
+
50
+
51
+ 下記の方にも伺っておりますが…
52
+
53
+
54
+
55
+ 今度はScriptの書き換えに手こずっています。
56
+
57
+
58
+
59
+ 正方形の画像を2枚使用し １枚を画像ｂとします 画像ｂは常にブラウザの画面
60
+
61
+ 左上に固定 もう１枚は画像aとして ブラウザの外からフェードインするように
62
+
63
+ 位置を設定しています。
64
+
65
+
66
+
67
+ 画像ｂをクリックすると 画像aがブラウザの外から落下（フェードイン）
68
+
69
+ するように記述し成功したのですが。
70
+
71
+ 画像ｂをクリックせず 画像aをフェードインさせる記述がわかりません
72
+
73
+ .auto(function){ 的な記述をすれば良いのでしょうか？
74
+
75
+
76
+
77
+ という質問です 連投してしまい すみません。
78
+
79
+ ご回答を宜しくお願い致します。

2

文法修正

2015/10/30 20:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ですが ブラウザを立ち上げた時だけ スタンバっている位置が真ん中になり
16
16
 
17
- 突然 現れたように画面の真ん中から左上に飛ぶのです。
17
+ 突然 現れたように画面の真ん中から左上に移動するのです。
18
18
 
19
19
 
20
20
 

1

誤字脱字による編集

2015/10/29 19:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- 自分のさせたい動きは 画面左上のブラウザ外からロゴがまっすぐ下に落下し
9
+ 自分のさせたい動きは 画面左上のブラウザ外からロゴがまっすぐ落下し
10
10
 
11
11
  bottom位置で ボールのように少し上下にリバウンドして止まるというものです。
12
12