【jQuery】要素が画面内に入ったら表示する

要素が画面に入ったかどうかの判定にはjquery.inviewを使うと楽。

GitHub – protonet/jquery.inview

https://github.com/protonet/jquery.inview

【jQuery】要素が画面内に入ったかどうかを判定する方法【jQuery】要素が画面内に入ったかどうかを判定する方法

opacityが使いやすい

サンプル

「要素が画面に入ったら表示する」ときにはopacityが便利。

「要素が画面に入ったら表示する」をopacityで実現する方法
  1. 要素のopacityを0(= 透明度100%)にしておく
  2. 要素が画面に入ったらopacityを1(= 透明度0%・不透明)にする

非表示であっても要素自体は存在する(= 見えなくなるだけで、高さや幅はきちんと確保される)ので、レイアウトが乱れることはない。

要素のopacityを0にするときは、CSSではなくjsで設定すると良い。そうすれば、非表示(= 初期状態)・表示の両方の処理をjsでやるので統一感があって良い。

逆に、「CSSで非表示(= 初期状態)・jsで表示」とすると、「非表示はCSS」と「表示はjs」のように処理が分散してしまって統一感がなくなり、後から見たときに分かりにくくなる。

HTML
CSS
jQuery

その他の方法

色々考えられるが、opacityの方が良い。理由は以下参照。

visibility

CSS

単に「非表示 → 表示」とするだけならcss()で処理できるので簡単。

非表示であっても要素自体は存在する(= 見えなくなるだけで、高さや幅はきちんと確保される)ので、opacityと同様に非表示時でもレイアウトが乱れることもない。

ただし、animate()はvisibilityに非対応なので時間をかけてジワッと表示させたいときなどには使えない。

MEMO

animate()は数値を設定するようなプロパティにしか使えない(文字サイズ変更など)ので、visibilityの変更は無理。

※別途プラグイン等があれば文字の色くらいは変えられるらしい(詳細は調べていない)

そのあたりを考慮するとopacityの方が使いやすい。

display

CSS

noneを設定すると要素自体が非表示になる(= 高さや幅も消える)ので、レイアウトが乱れる場合がある。

そもそも、noneの状態だと「画面に入っている or 入っていない」の判定すらできなくなるので、「要素が画面に入ったら表示する」という処理にはdisplayは使えない。

.offset() | jQuery API Documentation

view-source:https://api.jquery.com/offset/#offset

jQuery does not support getting the offset coordinates of hidden elements

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です