回答編集履歴
5
追記&文言の編集
answer
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
見た目をいじるcssは色々ありますが、
|
|
44
44
|
|
|
45
|
-
- `display: none; → block;` : 要素そのものが
|
|
45
|
+
- `display: none; → block;` : 要素そのものが急に現れる、すなわち位置が変わるので論外。(質問者様が考えられた方法でも多分こうなります。)
|
|
46
46
|
- `visibility: hidden; → visible;` : アニメーションに設定はできるが、細かい変化にはできない
|
|
47
47
|
- `opacity: 0; → 1;` : いい感じで変化してくれる。`img`要素に適しそう。
|
|
48
48
|
|
4
リンク名の付け直し
answer
CHANGED
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
}
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/4d3aqyeh/)
|
|
19
|
+
[jsFiddle : cssアニメーション 一気に](https://jsfiddle.net/namnium1125/4d3aqyeh/)
|
|
20
20
|
|
|
21
21
|
時間設定を変更すれば徐々に出現させることも可能です。
|
|
22
22
|
|
|
23
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/4d3aqyeh/7/)
|
|
23
|
+
[jsFiddle : cssアニメーション 徐々に](https://jsfiddle.net/namnium1125/4d3aqyeh/7/)
|
|
24
24
|
|
|
25
25
|
#
|
|
26
26
|
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
});
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/)
|
|
35
|
+
[jsFiddle : jQuery 一気に](https://jsfiddle.net/namnium1125/ytobqs6n/)
|
|
36
36
|
|
|
37
37
|
こちらも時間設定により徐々に出現させることが可能です。
|
|
38
38
|
|
|
39
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/7/)
|
|
39
|
+
[jsFiddle : jQuery 徐々に](https://jsfiddle.net/namnium1125/ytobqs6n/7/)
|
|
40
40
|
|
|
41
41
|
#
|
|
42
42
|
|
3
検証の終了に伴い書き換え
answer
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
見た目をいじるcssは色々ありますが、
|
|
44
44
|
|
|
45
45
|
- `display: none; → block;` : 要素そのものがなくなる、すなわち位置が変わるので論外。
|
|
46
|
-
- `visibility: hidden; → visible;` :
|
|
46
|
+
- `visibility: hidden; → visible;` : アニメーションに設定はできるが、細かい変化にはできない
|
|
47
47
|
- `opacity: 0; → 1;` : いい感じで変化してくれる。`img`要素に適しそう。
|
|
48
48
|
|
|
49
49
|
個人的にはこんなイメージです。
|
2
スペルミス
answer
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
見た目をいじるcssは色々ありますが、
|
|
44
44
|
|
|
45
45
|
- `display: none; → block;` : 要素そのものがなくなる、すなわち位置が変わるので論外。
|
|
46
|
-
- `
|
|
46
|
+
- `visibility: hidden; → visible;` : (検証中。とりあえず今言えるのは細かい値を調整できない)
|
|
47
47
|
- `opacity: 0; → 1;` : いい感じで変化してくれる。`img`要素に適しそう。
|
|
48
48
|
|
|
49
49
|
個人的にはこんなイメージです。
|
1
ちょっとした編集
answer
CHANGED
|
@@ -22,8 +22,10 @@
|
|
|
22
22
|
|
|
23
23
|
[jsFiddle](https://jsfiddle.net/namnium1125/4d3aqyeh/7/)
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
#
|
|
26
26
|
|
|
27
|
+
jQueryで実装する場合はこうですかね。ただまぁ、古いブラウザにも対応できるかもしれませんが、わざわざcssアニメーションを使わずこちらで実装するメリットは薄いと思います。
|
|
28
|
+
|
|
27
29
|
```js
|
|
28
30
|
$(window).on("load",function(){
|
|
29
31
|
$("#late").delay(3000).animate({"opacity": 1},0);
|
|
@@ -34,4 +36,14 @@
|
|
|
34
36
|
|
|
35
37
|
こちらも時間設定により徐々に出現させることが可能です。
|
|
36
38
|
|
|
37
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/
|
|
39
|
+
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/7/)
|
|
40
|
+
|
|
41
|
+
#
|
|
42
|
+
|
|
43
|
+
見た目をいじるcssは色々ありますが、
|
|
44
|
+
|
|
45
|
+
- `display: none; → block;` : 要素そのものがなくなる、すなわち位置が変わるので論外。
|
|
46
|
+
- `visibirity: hidden; → visible;` : (検証中。とりあえず今言えるのは細かい値を調整できない)
|
|
47
|
+
- `opacity: 0; → 1;` : いい感じで変化してくれる。`img`要素に適しそう。
|
|
48
|
+
|
|
49
|
+
個人的にはこんなイメージです。
|