
複数の画像やテキストを同じ位置で一定時間ごとに切り替えて表示するアニメーションの作り方です。jQueryを使用する方法と使用しない脱jQueryの2パターン作成しました。ページの最後にデモを用意しています。

- [jQueryで作る切り替えアニメーション](#jQueryで作る切り替えアニメーション)
- [jQueryを使用しないJavaScriptで作る切り替えアニメーション](#jQueryを使用しないJavaScriptで作る切り替えアニメーション)

## jQueryで作る切り替えアニメーション

### 事前準備

jQuery本体を読み込みます。

```html
<script src="jquery-3.3.1.min.js"></script></div>
```

### 切り替える要素をhtmlに記述

画像でもできますが、サンプルではテキストを切り替えます。切り替えたいテキスト全てにアニメーション用のclass名を付与します。

```html
<ul>
  <li class="text">テキスト1</li>
  <li class="text">テキスト2</li>
  <li class="text">テキスト3</li>
  <li class="text">テキスト4</li>
</ul>
```

### JavaScriptで切り替える処理を作成

テキストを順番に表示させたいのでインデックス番号の変数を宣言し、`-1`を代入します。テキストが表示されるところからアニメーションを始めるので、`hide()`で一旦非表示にします。

```js
const txts = $(".text");
let txtIndex = -1;
txts.hide();
```

テキストを切り替える関数の中身は「インデックス番号を1ずつ増やす」「`eq()`で表示したいテキストを指定」「指定したテキストをフェードイン、フェードアウト」になります。

先ほどインデックス番号を`-1`としたのは関数の最初にインデックス番号を1増やすという処理をするため、テキストの1つ目が最初に表示されるようにするためです。アニメーションではフェードインのあとにすぐフェードアウトをしてしまうと表示されているテキストを読む時間がなくなってしまうので`delay()`をはさみます。フェードアウトのあと、同じ処理を繰り返すために`showNextTxt`を実行します。あとは、読み込み後に`showNextTxt`を一度実行するだけです。

```js
function showNextTxt() {
  txtIndex++;
  txts
    .eq(txtIndex % txts.length)
    .fadeIn(2000)
    .delay(3000)
    .fadeOut(2000, showNextTxt);
}
showNextTxt();
```

## jQueryを使用しないJavaScriptで作る切り替えアニメーション

### 切り替える要素をhtmlに記述

切り替えたいテキスト全てにアニメーション用のclass名を付与します。さらに1つめのテキストに`is-active`を付与します（class名は何でも構いません）。

```html
<ul>
  <li class="text is-active">テキスト1</li>
  <li class="text">テキスト2</li>
  <li class="text">テキスト3</li>
  <li class="text">テキスト4</li>
</ul>
```

### CSSで切り替わりのアニメーションを作成

CSSで通常は`opacity: 0;`、`is-active`が付与されたときに`opacity: 1;`となるよう指定し、jQueryでの「fadeIn」「fadeOut」にあたる部分は`transition`で設定します。サンプルでは2秒かけて「0から1」「1から0」になるようにしました。

```css
.text {
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
.text.is-active {
  opacity: 1;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
```

### JavaScriptで切り替える処理を作成

JavaScriptでは、先ほどと同様にテキストのインデックス番号`txtIndex`に`-1`を代入します。

```js
const txts = document.getElementsByClassName("text");
let txtIndex = -1;
```

テキストを切り替える関数では「表示されているテキストをフェードアウトさせて、次のテキストをフェードインさせる」という処理を繰り返します。

関数の具体的な中身は「インデックス番号を1ずつ増やす」「現在表示中のテキストと次に表示するテキストを取得」「現在表示中のテキストから`is-active`を取って`display: none;`に」、「次に表示するテキストを`display: block;`にしてから`is-active`を付与」です。

jQueryのような`fadeIn`を実現するために`opacity: 0;`のまま一旦`display: block;`にします。`fadeOut`はその逆です。

```js
function changeTxt() {
  txtIndex++;

  let currentNum = txtIndex % txts.length;
  let nextNum = (txtIndex + 1) % txts.length;
  let current = txts[currentNum];
  let next = txts[nextNum];

  setTimeout(function () {
    current.classList.remove("is-active");
  }, 3000);
  setTimeout(function () {
    current.style.display = "none";
    next.style.display = "block";
  }, 5100);

  setTimeout(function () {
    next.classList.add("is-active");
  }, 5200);
}
```

アニメーションを繰り返す関数を作成します。ここでは、テキスト切り替えの関数を`setInterval`で一定時間ごとに繰り返す処理をします。

```js
function showNextTxt() {
  setInterval(changeTxt, 7200);
}
```

最後に、`setInterval`は指定した時間ごとに処理を繰り返しますが、最初の1回も指定時間待たなければ実行されません。そこで繰り返しの関数の実行の前に、読み込み後1度だけテキスト切り替えの関数（`changeTxt`）を実行することで、最初の1回だけ切り替えまで長く時間がかかってしまうということがないようにします。

```js
changeTxt();
document.addEventListener("DOMContentLoaded", showNextTxt, false);
```

## デモ

[「jQUery/JavaScriptで作る一定時間ごとに切り替えて表示するアニメーション」のデモはこちら](https://demos.chocolat5.com/setinterval-animation/)

## 参考

- [Qiita「javascript で fadeOut() したい」, &lt;https://qiita.com/snjssk/items/1ae5308f3a26f15f697f&gt;](https://qiita.com/snjssk/items/1ae5308f3a26f15f697f)（参照2019-3-24）
- [森のコーディング「javascriptでsetIntervalの最初の1回はまたずにすぐに実行したい時」, &lt;http://mori-coding.blog.jp/archives/7211359.html&gt;](http://mori-coding.blog.jp/archives/7211359.html)（参照2019-3-24）


jQUery/JavaScriptで作る一定時間ごとに切り替えて表示するアニメーション

Tags