jQueryのend()で画像の自動フェードイン・フェードアウト切替を実装!

2017/2/5 2019/9/5 JavaScript, プログラミング

jQuery、やっぱり便利で使うことがよくあります。きっとそういう方も多いはず。
そんなjQueryの中で、end()というメソッド（命令の種類）があるのですが、恥ずかしながら、最近自分がend()をあまりきちんと理解していないことに気がつきました。。。

ちゃんと学び直したところ、end()が非常に便利であることがわかったので、画像の自動フェードイン・フェードアウト切替を実装するという例を用いて、ちゃんと理解したつもりの自分が、end()の便利さを語ってみようと思います！笑

1 作成する画像の自動フェードイン・フェードアウトのサンプル
2 初期設定：CSSで「一番最初の画像以外を非表示にする
3 jQueryでフェードイン・フェードアウトを実装
- 3.1 フェードイン・フェードアウトとメソッドチェーン
- 3.2 setInterval()
4 end()はメソッドチェーンにおける要素を一つ遡ってくれる
5 まとめと補足

作成する画像の自動フェードイン・フェードアウトのサンプル

今回作成するサンプルの完成形は以下の通りです！

See the Pen mRLgqQ by Tatsuya Kosuge (@castero) on CodePen.

3秒ごとに自動で画像がフェードイン・フェードアウトしています。
それなりに見ることも多いものですよね！フェード型のスライドショーにも使えると思います。

HTMLのところを見ていただくとわかるのですが、今回はulタグやliタグを使用しているのではなく、divタグの中に、切り替えする画像も含めて直接imgタグを全て入れているところがポイントです！

HTMLやCSSのところをチェックすると、その部分のソースコードを見ることができるようになっていますので、ぜひ確認してみてくださいね！

初期設定：CSSで「一番最初の画像以外を非表示にする

jQueryの前に、CSSでの初期設定について少し触れておきます。

スライド画像は今回の画像でいうと3枚あるのですが、画像が3枚とも表示された状態になってしまうとフェードイン・フェードアウトで画像を自動切り替えを行う上での前提がそもそも成り立たなくなってしまいます。

今回のサンプルの場合、画像を1枚ずつフェードイン・フェードアウトで自動で切り替えして表示する必要があるので、初期段階では1枚目の画像のみを表示した状態にしておく必要があるので、CSSで実装します。


//:not(条件)で、「条件に当てはまるもの以外」の要素となる
//下記の場合は、.slideというclassの中にあるimgタグの中で、一番最初の要素以外に全て当てはまる。
.slide img:not(:first-child){
  display:none;
}

最近個人的にも気に入っている擬似セレクタ「:not」。
このセレクタを使うと、「〜以外」という選び方ができるので非常に便利です！

ここまでで、1枚目の画像のみを表示させることができました。

jQueryでフェードイン・フェードアウトを実装

次に、jQueryでフェードイン・フェードアウトを実装します。

フェードイン・フェードアウトとメソッドチェーン


setInterval(function(){
  $(".slide").find(":first-child").fadeOut().next("img").fadeIn();
},3000);

ひとまず、一番最初の画像がフェードアウトしたら、続けて次の画像（2枚目）がフェードインする、というものを実装します。
jQueryの便利な部分の1つである「メソッドチェーン」を使って、

1枚目の画像がフェードアウトしたら（$(“.slide”).find(“:first-child”).fadeOut()）
2枚目の画像がフェードインするという動き（$(“.slide”).find(“:nth-child(2)”).fadeIn()）

を、next()を活用して、本来複数行書いて表現するような内容を、１行でまとめて記述できるようにしています。

setInterval()

setInterval()は、一定の時間ごとに命令を実行することができる便利なメソッドです。
今回でいうと、setInterval()のカッコの中に入っている数字の3000という部分は、3秒を表しているのです！

なので、3秒ごとに命令を実行し続けるということが可能になります。

しかし、まだこのままの状態だと画像が１枚目から２枚目に一度切り替わっただけで、フェードイン・フェードアウトが止まってしまいます！
ここで出てくるのがend()なのです！

end()はメソッドチェーンにおける要素を一つ遡ってくれる

end()は、メソッドチェーンなどで連続した命令を記述する時に、要素を一つ遡ってくれるというなんとも便利なものです。


setInterval(function(){
  $(".slide").find(":first-child").fadeOut().next("img").fadeIn();
},3000);

先ほども掲載した上記のコードは、1枚目の画像がフェードアウトしたら、その隣・つまり2枚目の画像がフェードインするという意味のプログラムなんですが、setInterval()も含めてこのプログラムをそのまま実行すると、１枚目の画像は一度フェードアウトして非表示になっているので、2回目以降プログラムが実行される時には、すでに消えている画像をフェードアウトするという意味不明なプログラムを実行してしまうことになるので、事実上意味のないプログラムになってしまうのです！

ここでend()を使用すると、2枚目の画像がフェードインしたら、その前に指定していた要素・つまり１枚目の画像（$(“.slide”).find(“:first-child”)）の部分に遡って、1枚目の画像に対してappendTo()を実行するということになるのです！

一度フェードアウトして非表示になった1枚目の画像に対してappendTo(“.slide”)を実行することで、１枚目にあった画像が一番最後に移動するので、フェードインして表示された2枚目の画像が、１枚目に繰り上がるわけなんですね！

ああ、なんだか長文を書いてしまいましたが・・・end()を使うことによって、この繰り返しを実行してくれるというわけなんです！
以上が、動きの一連の説明でした！