- ベストアンサー
display:noneの動作をゆっくり実行したい
display:noneの動作をゆっくり実行して、スーッと消えていくようにしたいです。 以下のコードで試しましたが、パッと消えてしまいます。 ファーストビューの1/10よりも大きく動かすと消えるようにしたつもりです。 【HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/slow_hide.css"> </head> <body> <div class="test1"> <p class="locate">■</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script src="./js/slow_hide.js"></script> </body> </html> 【CSS】 .test1{ height: 500px; width:600px; background-color: yellow; position: relative; } .locate{ position: absolute; top:200px; left:220px; } .parts_hide{ display:none; transition: display 10.0s; } 【JS】 $(function () { $(window).on("scroll", function () { const fvHeight = window.innerHeight; if (fvHeight / 10 < $(this).scrollTop()) { $(".locate").addClass("parts_hide"); } else { $(".locate").removeClass("parts_hide"); } }); }); display:none; はゆっくり動作できないのでしょうか？
- p3kq4h9f
- お礼率93% (62/66)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
え～っと、CSSの display:none; てのは、要素を透明にするんじゃ無くて「要素そのものの存在を無しにする」という指定なので。だからCSSにしろ、Javascriptにしろ、指定された要素(タグ)に display:none; が適用された瞬間、webページ上からその存在が消滅してしまうんです。 いわゆる、ジわ～っ…て感じで徐々に消えてい行く感じにするためには。 display:none; じゃ無くて、opacity: と visibility: というCSSを使います。 .parts_hide { visibility: hidden; opacity: 0; } .parts_hide:hover { visibility: visible; opacity: 1; transition: 10s; } ～上記のような感じのCSSを指定した場合、該当する要素の上にマウスを乗せると指定した秒数をかけてじんわりと浮かび上がる感じになります。逆にマウスが乗ったら消えるようにしたいのであれば、それぞれの opacity: と visibility: の指定値を入れ替えます。 まあCSSは自分の環境で実験してみるのが一番なので、とりあえずやってみて、上手く行かなかったら適当に css+visibility+opacity+transition とかでググってみてください。サンプルがいっぱい出て来ると思います。
その他の回答 (1)
- retorofan
- ベストアンサー率34% (435/1276)
Q display:none; はゆっくり動作できないのでしょうか？ A できません。 その理由は、display プロパティが要素の「表示・非表示」を瞬時に切り替えるためだからです。 ＞ゆっくり実行して、スーッと消えていくようにしたい そうするためには、CSSを下記のように修正すればできます。 【CSS】 .test1 { height: 500px; width: 600px; background-color: yellow; position: relative; } .locate { position: absolute; top: 200px; left: 220px; transition: opacity 10.0s; } .parts_hide { opacity: 0; }
お礼
opacityを使うのですね。 displayでは無理でしたか……。 ご回答ありがとうございました！
お礼
「display:none; が適用された瞬間、webページ上からその存在が消滅してしまう」 とのことなので、これでは無理ですね。 opacityあるいはvisibilityを使うことにします。 ご回答ありがとうございました！