1つの画像に複数パターンのtransitionを順番に発生させる方法

実現したいこと

・画像Aにマウスオーバーを行うと別の画像Bのフェードイン・フェードアウトアニメーションを動作させたい
・フェードイン・フェードアウトアニメーションは1パターンではなく複数パターンあり、マウスオーバーの度に順番に動作するようにさせたい

発生している問題・分からないこと

現在ここまでなら作成した、という部分を記載します。独学のため私の知識では下記が限界でした。

①マウスオーバーをした際のフェードイン・フェードアウトアニメーションを3パターン作成し、画像Aも3つ用意。マウスオーバーを行うと各画像ごとにそれぞれα、β、Θというアニメーションが動作するよう設定

②Bという画像を用意し、Bにマウスオーバーを行うたびに画像C1がC2→C3→C1→C2…と切り替わる動作を作成

しかし実際に行いたいことは①と②を合わせたような内容です。

≪行いたいこと≫
画像Bを用意し、Bにマウスオーバーを行うたびに画像Aにα、β、Θのアニメーションが順番に動作

該当のソースコード

<!-- 画像のフェードイン・フェードアウト --> <!-- アニメーション 【α】--> <div class="blink"> <p class="blink-img"><img src="A.png" alt=""></p> </div> <!-- アニメーション【β】 --> <div id="idLogoFast"> <div class="blink-fast"> <p class="blink-fast-img"><img src="A.png" alt=""></p> </div> </div> <!-- アニメーション【Θ】 --> <div id="idLogoSlow"> <div class="blink-slow"> <p class="blink-slow-img"><img src="A.png" alt=""></p> </div> </div>

/* アニメーション 【α】 */ .blink { } .blink:hover .blink-img { opacity: 1; transition-duration: .1s; transition-timing-function: linear; transition-delay: 0s; } .blink-img { opacity: 0; transition: opacity 0.3s ease; transition-delay: 3s; } /* アニメーション 【β】 */ .blink-fast { } .blink-fast:hover .blink-fast-img { opacity: 1; transition-duration: .5s; transition-timing-function: linear; transition-delay: 0s; } .blink-fast-img { opacity: 0; transition: opacity 0.3s ease; transition-delay: 3s; } /* アニメーション 【Θ】 */ .blink-slow { } .blink-slow:hover .blink-slow-img { opacity: 1; transition-duration: .5s; transition-timing-function: linear; transition-delay: 0s; } .blink-slow-img { opacity: 0; transition: opacity 0.3s ease; transition-delay: 3s; }

//アニメーション【β】 $(function(){ var stid = ""; //マウスオーバーで点滅（setIntervalでfadeIn、fadeOutを繰り返します 速いver.） $("#idLogoFast").mouseover(function(){ stid = setInterval(function(){ $('#idLogoFast img').fadeOut(200,function(){$(this).fadeIn(200)}); },400); }); //マウスアウトで点滅をクリア（clearInterval） $("#idLogoFast").mouseout(function(){ clearInterval(400); }); }); //アニメーション【Θ】 $(function(){ var stid = ""; //マウスオーバーで点滅（setIntervalでfadeIn、fadeOutを繰り返します 遅いver.） $("#idLogoSlow").mouseover(function(){ stid = setInterval(function(){ $('#idLogoSlow img').fadeOut(600,function(){$(this).fadeIn(600)}); },1200); }); //マウスアウトで点滅をクリア（clearInterval） $("#idLogoSlow").mouseout(function(){ clearInterval(1200); }); });

<!-- 表示画像の切り替え --> <img id="image_place" src="C1.png"> <script type="text/javascript"> // img要素を取得する let img = document.getElementById("image_place"); // 表示する画像番号 let idx = 1; // 画像を切り替える関数 function changeImage() { idx++; if (idx > 3) { idx = 1; } // img要素のsrcに画像ファイル名を設定する img.src = "C" + idx + ".png"; } </script> <input type="image" onmouseover="changeImage()" src="B.png"> </div>

試したこと・調べたこと

上記の詳細・結果

実行したい内容が複雑すぎて同じ内容のものは見つけられませんでした

補足

特になし