2016.05.09
jquery

jQueryで特定のCSSの表示を遅くする方法

jquery023

HTML、CSSの一部だけ表示を数秒遅らせて表示したいときの方法を紹介します。
jQueryとwindowオブジェクトのメソッドであるsetTimeoutを使用します。とっても簡単です。

jQueryのsetTimeoutで特定のCSSクラスを遅らせて表示

setTimeoutの使い方

jQueryの記述方法は以下になります。

$(function(){
    setTimeout(function(){
        // ここに遅れて表示させる内容を記述
    }, 3000);
});

上記だと3秒後に指定した処理が実行されます。

setTimeoutを使用した例

今回はsetTimeoutを使用し、特定のCSSクラスの表示を5秒遅らせる方法です。最初は非表示、その5秒後に表示するという処理をします。

1. jQueryを読み込む

HTMLのhead内にjQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

2. jQueryの処理を記述

jQuery本体よりも下に記述しないと処理されないので注意!

<script type="text/javascript">
$(function(){

    // 5秒後に出力する
    setTimeout(function(){
        $('.output').show();
    }, 5000);
 
});
</script>

3. HTMLに記述

<p>ここの下に5秒後にoutputクラスが表示されます。</p>
<div class="output">5秒たったので表示されました!</div>

divで囲われたoutputクラスの中には画像やリンクも挿入できるし、子要素を入れることもできます。

4. CSSに記述

.output {display:none;}

上記のようにすることで、最初は非表示にし、jQueryで表示させています。

setTimeoutのまとめ

jQueryのsetTimeoutは、指定した秒数で遅らせて処理することができるので、使い方次第で面白いことがたくさんできそうですね。アニメーションでフェイドインやフェイドアウトなどもよいですし、今回の例とは逆に、最初に表示してあったものを遅らせて非表示にするのもできます。

Memo:

ちなみに私は「Web制作の現場で使うjQueryデザイン入門」という本で初めてjQueryを勉強するようになりました。

CSSとHTMLが分かる人にはお勧めの本です。
jQueryについての知識が身につき、コードが自分で書けるようになります。

関連する記事

コメント & トラックバック
  1. 通りすがりの開発者

    綺麗にまとまっていて解りやすいですね。
    ちょっと気になったところが…。

    > jQueryのsetTimeoutを使用します。とっても簡単です。

    setTimeout自体はjQueryに依存するものではなくwindowオブジェクトのメソッドですね(´・ω・`)
    本文中の記述だとちょっと紛らわしいかもしれないです。

    window.setTimeout – Web API インターフェイス | MDN
    https://developer.mozilla.org/ja/docs/Web/API/Window/setTimeout


    • Ri-mode

      通りすがりの開発者さん

      ご指摘ありがとうございました。ご指摘の通り、私自身少し勘違いしていました。
      まだまだ勉強不足です・・・。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP