javascript/jQueryで簡単なアニメーションの作り方が知りたい。

Question

javascript 初心者です。

topページにフェードのアニメーションを入れたいのですが、
スライダーのプラグイン[slick.js]
http://kenwheeler.github.io/slick/
を入れフェードの処理を実行し、うまく行ったかのように思いましたが、最後で止まらず戻ってきてしまうので
http://sublimelife.hatenablog.com/entry/2017/01/18/092931
このような処理を行いました。

一見うまく行ったかに見えましたが、このslick.jsはスライド（アニメーション）がうまく動いてくれる時と動かない時があり不安定だなと思い、普通に
A →　B →　C　の順番でフェードし最後のCで止まればいいのでプラグインを使わず
jqueryでのみ処理をしたらいいかなと思いましたがどうやって書いたらいいかわからずなので
質問させてください。

簡単なフェードのアニメーションの処理をどのように書いたらいいか、
もしくは参考になるサイトを探しています。

よろしくお願いします。

Answer 1

過去に同じような質問があり解決に至っているようです。
teratail 過去解決済質問

Comments

[ttkun]

ご回答ありがとうございます。
その回答を元に書かれたのが下記の記事なのですが、試したところ、一見うまく行くようなのですが、たまに戻ったりと不安定なので。slick.jsでこの実装はやめようかと思っています。
http://sublimelife.hatenablog.com/entry/2017/01/18/092931

Answer 2

簡単なフェードのアニメーションの処理をどのように書いたらいいか、

もしくは参考になるサイトを探しています。

↑がご質問と読みました。
「jQuery クロスフェード」でググったところ、このような記事が見つかりました。
【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。 - ONZE

Comments

[ttkun]

ご回答ありがとうございます。
簡単なスライドですとプラグインを使用せずに使えそうだなと思いました。
今回は最後の画像のところでアニメーションが止まるよう実装したいので、また別の実装で試してみます。

Answer 3

こちらが自分が実装したい内容に一番近い内容でした。
みなさん回答ありがとうございまいた。
http://black-flag.net/jquery/20110525-3120.html

Answer 4

動かしたい動作をCSSのアニメーションで作成し、アニメーションの発火させたいタイミングでclassを切り替えるとプラグインなしでもできそうです。

・jQuery classの追加・削除
https://qiita.com/NobuyaIshikawa/items/300739f6da6a95e58306

・【CSS3】@keyframes と animation 関連のまとめ
https://qiita.com/7968/items/1d999354e00db53bcbd8

Comments

[ttkun]

別の実装で参考になりそうです。ありがとうございます。