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

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

GitHub – protonet/jquery.inview

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

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

opacityが使いやすい

サンプル

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

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

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

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

     




画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される

.item {
    font-size: 16px;
    padding: 10px;
    border: 1px solid red;
    margin-bottom: 500px;
}

$(function(){
    //事前に要素のopacityを0(= 透明度100%)にしておく
    $('.item').css('opacity', 0);

    //要素が画面に入ったらopacityを1(= 透明度0%・不透明)にして表示する
    $('.item').on('inview', function(event, isInView) {
        if(isInView) { 
            $(this).animate({
                opacity : 1.0
            }, 1000);
        }
    });
});

その他の方法

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

visibility

visibility : hidden;  /* 非表示 */
visibility : visible; /* 表示 */

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

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

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

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

display

display : none;  /* 非表示 */
display : block; /* 表示 */

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