jQueryで特定の秒数後にCSSを書き換えるコード(setTImeout使用)のメモ。

自分用メモ。
WEBサイトが表示された指定の数秒後にCSSを書き換えたい場合のコード。

HTML側では変更したCSS名と対象となるCSS名を含めておきます。

文字の色が5秒後に変わります。

今回の場合は、beforeがafterというCSSに変更されるわけですが、jQueryで対象のCSSを探すためにtimeをクラス名でいれています。
セレクタなんかで指定することで余分なCSSを省くこともできます。


jQuery側

jQueryではsetTImeoutを使います。
setTImeoutは指定した秒数後に、jQueryを実行させる優れもの。

使い方はいたって簡単でsetTImeoutの中に、命令文＆何秒後にしたいかをいれておきます。

今回のコードではtimeのクラス名にあるbeforeをひとまず削除して(removeClass)、次いでafterを追加しています。(addClass)


実際に上のコードで3秒後に文字の色が変わるのがカキ。

デモページ：3秒後に文字の色が変わります。

全コード

文字の色が5秒後に変わります。

これを使って、今使っているサイトで画像から途中で動画に変えるつもり。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。