js(jquery)で一定時間が過ぎるとclassを変更する方法が知りたい。

###前提・実現したいこと

ホームページのトップ画面に
backgroundをフェードインで切り替える実装をしたいと思っています。

<div class="mainVisual img01">
<div class="serch-form">
-----
ここにコンテンツを入れる
-----
</div>
</div>

js(jquery)で一定時間が過ぎるとclassを変更する方法が知りたいです。

backgrondで画像を切り替えるためclass名が一定時間で変えたいと考えています。

追記：
スライドショーのようにimg01,img02,img03と一定時間ごとにclassが切り替わるようにしたいです。
ご回答よろしくお願い致します。

kei344

2017/01/14 10:50

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

退会済みユーザー

2017/01/16 02:25

初めての質問でしたので機能の実装を良くわかっていませんでした。<code>を囲みましたので少しは見やすくなりましたでしょうか。ご教示ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

setTimeoutメソッドを使うことで一定時間後に処理をすることができ、クラスを追加するにはaddClassメソッドを使います。フェードインにはfadeInメソッドを使います。
下のコードではページの読み込みが完了した1秒後にaddClassメソッドでadd_classクラスをdivタグに追加しています。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .add_class {
13            width: 100px;
14            height: 100px;
15            background-color: black;
16        }
17    </style>
18</head>
19<body>
20<div></div>
21<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
22<script>
23    $(document).ready(function () {
24        $("div").hide();
25        setTimeout(function () {
26            $("div").removeClass("add_class").addClass("add_class").fadeIn(1000);
27        }, 1000);
28    });
29</script>
30</body>
31</html>

投稿2017/01/14 10:59

編集2017/01/14 12:18

s8_chu

総合スコア14731

kei344

2017/01/14 11:17

たいしたことではありませんが、addClass は同じクラス名を複数回使用しても1つのみ追加するので、hasClass による分岐が無くても問題にはなりませんよ。

s8_chu

2017/01/14 12:22

確かにそうですね。修正させていただきました。

退会済みユーザー

2017/01/16 02:20

ご回答ありがとうございます。１つだけ画像切り替えはこれでできると思いますが、複数のclassを切り替えができないと思います。例えばスライドショーのように１秒ごとにadd_class1,add_class2,add_class3のように切り替えを行いたいと思っています。なんども質問をしてしまい、申し分けありません。もし、解決法がありましたらよろしくお願い致します。

行動規範の内容に同意します