質問編集履歴
6
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
```css
|
|
48
48
|
|
|
49
|
-
.wrap {
|
|
49
|
+
.wrap {width: 100%; height: 100px;}
|
|
50
50
|
|
|
51
51
|
.item {background:skyblue; width: 100%; height: 50px;}
|
|
52
52
|
|
|
@@ -77,6 +77,8 @@
|
|
|
77
77
|
fadeOutが1000なので、CSSにtransitionとして1sを追加すれば、`.box`が移動する時間はfadeOutと同じ時間でゆっくりになると思いました。（jQueryの1000 = CSSの1s = 1秒）
|
|
78
78
|
|
|
79
79
|
```CSS
|
|
80
|
+
|
|
81
|
+
.wrap {width: 100%; height: 100px;}
|
|
80
82
|
|
|
81
83
|
.item {background:skyblue; width: 100%; height: 50px;}
|
|
82
84
|
|
5
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -10,9 +10,11 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
クリック：`.item`のfadeOutスタート & `.box`を上にゆっくり移動するのスタート
|
|
14
14
|
|
|
15
|
+
↓1秒後
|
|
16
|
+
|
|
15
|
-
|
|
17
|
+
処理完了：`.item`のfadeOut完了 & `.box`の移動完了
|
|
16
18
|
|
|
17
19
|
|
|
18
20
|
|
|
@@ -92,7 +94,7 @@
|
|
|
92
94
|
|
|
93
95
|
$('.item').fadeOut(1000);
|
|
94
96
|
|
|
95
|
-
$('.
|
|
97
|
+
$('.item').css('position','absolute'); // .itemをabsoluteにして、下の.boxが fadeOut完了を待たずにすぐに上に移動しはじめるように追加
|
|
96
98
|
|
|
97
99
|
});
|
|
98
100
|
|
4
桁を修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
`.item`をfadeOutさせるとき、下の`.box`が上にきます。
|
|
4
4
|
|
|
5
|
-
これをゆっくりと、
|
|
5
|
+
これをゆっくりと、1秒かけて上にもっていきたいです。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -58,13 +58,13 @@
|
|
|
58
58
|
|
|
59
59
|
$('.fadeOut').click(function(){
|
|
60
60
|
|
|
61
|
-
$('.item').fadeOut(100);
|
|
61
|
+
$('.item').fadeOut(1000);
|
|
62
62
|
|
|
63
63
|
});
|
|
64
64
|
|
|
65
65
|
$('.fadeIn').click(function(){
|
|
66
66
|
|
|
67
|
-
$('.item').fadeIn(100);
|
|
67
|
+
$('.item').fadeIn(1000);
|
|
68
68
|
|
|
69
69
|
});
|
|
70
70
|
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
|
|
73
73
|
###試したこと
|
|
74
74
|
|
|
75
|
-
fadeOutが100なので、CSSにtransitionとして1sを追加すれば、`.box`が移動する時間はfadeOutと同じ時間でゆっくりになると思いました。（jQueryの100 = CSSの1s =
|
|
75
|
+
fadeOutが1000なので、CSSにtransitionとして1sを追加すれば、`.box`が移動する時間はfadeOutと同じ時間でゆっくりになると思いました。（jQueryの1000 = CSSの1s = 1秒）
|
|
76
76
|
|
|
77
77
|
```CSS
|
|
78
78
|
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
$('.fadeOut').click(function(){
|
|
92
92
|
|
|
93
|
-
$('.item').fadeOut(100);
|
|
93
|
+
$('.item').fadeOut(1000);
|
|
94
94
|
|
|
95
95
|
$('.box').css('position','absolute'); // absoluteにして、下の.boxが fadeOut 完了を待たずにすぐに上に移動しはじめるように追加
|
|
96
96
|
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
|
|
101
101
|
$('.fadeIn').click(function(){
|
|
102
102
|
|
|
103
|
-
$('.item').fadeIn(100);
|
|
103
|
+
$('.item').fadeIn(1000);
|
|
104
104
|
|
|
105
105
|
$('.item').css('position','relative'); // 同じ意図で追加
|
|
106
106
|
|
3
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -108,6 +108,6 @@
|
|
|
108
108
|
|
|
109
109
|
```
|
|
110
110
|
|
|
111
|
-
以上の
|
|
111
|
+
以上の変更を加えても意図した動作が実現できませんでした。
|
|
112
112
|
|
|
113
113
|
宜しくお願い致します。
|
2
コメントアウト追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
|
|
93
93
|
$('.item').fadeOut(100);
|
|
94
94
|
|
|
95
|
-
$('.box').css('position','absolute'); // absoluteにして、下の.boxが fadeOut 完了を待たずにすぐに上に移動しはじめるように
|
|
95
|
+
$('.box').css('position','absolute'); // absoluteにして、下の.boxが fadeOut 完了を待たずにすぐに上に移動しはじめるように追加
|
|
96
96
|
|
|
97
97
|
});
|
|
98
98
|
|
|
@@ -102,6 +102,8 @@
|
|
|
102
102
|
|
|
103
103
|
$('.item').fadeIn(100);
|
|
104
104
|
|
|
105
|
+
$('.item').css('position','relative'); // 同じ意図で追加
|
|
106
|
+
|
|
105
107
|
});
|
|
106
108
|
|
|
107
109
|
```
|
1
goji
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
|
|
73
73
|
###試したこと
|
|
74
74
|
|
|
75
|
-
fadeOutが100なので、CSSにtransitionとして1sを追加すれば、`.box`が移動する時間はfadeOutと同じ時間でゆっくりになると思いました。（jQuey
|
|
75
|
+
fadeOutが100なので、CSSにtransitionとして1sを追加すれば、`.box`が移動する時間はfadeOutと同じ時間でゆっくりになると思いました。（jQueryの100 = CSSの1s = 0.1秒）
|
|
76
76
|
|
|
77
77
|
```CSS
|
|
78
78
|
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
-
そしてjQ
|
|
87
|
+
そしてjQueryの方はクリック時にすぐに`box`が移動しはじめるように`.item`にabsoluteをつけました。
|
|
88
88
|
|
|
89
89
|
```
|
|
90
90
|
|