[jQuery]hoverイベントでのメソッドチェーンの使い方について教えてください。

Question

前提・実現したいこと

hoverイベントでメソッドチェーンの使い方がわかりません。
hoverでマウスをオン、オフしている際に、フェードイン、フェードアウトさせつつ画像を動かして表示させたいです。
下記のJOURNALのMAISON CACAO、CHOCOLATE BANKをホバーさせた時のような動きをさせたいです。
MAISON CACAO公式ブランドサイト

発生している問題・エラーメッセージ

エラーメッセージはでていませんが、fadeIn,fadeOutしか動きません、、

該当のソースコード

   <div class="store">
      <ul class="store_contents">
        <div class="store_contents_left">
          <img src="img/cullni_fashion.jpg" class="store_img_top">
          <img src="img/cullni_fashion2.jpg" class="store_img_top">
          <img src="img/cullni_fashion3.jpg" class="store_img_top">
          <img src="img/john_fashion.jpg" class="store_img_top">
          <img src="img/john_fashion2.jpg" class="store_img_top">
          <img src="img/john_fashion3.jpg" class="store_img_top">
          <img src="img/john_fashion4.jpg" class="store_img_top">
        </div>

        <div class="store_contents_right">
          <h6>MAISON CACAO<span>Location</span></h6>
          
          <dl class="store_top">
            <a href="#">
              <dt>KAMAKURA</dt>
              <dd>Kanagawa</dd>
            </a>
          </dl>
          ・
　　　　　　・
　　　　　　・

 .store_contents {
  display: flex;
  width: auto;
  height: auto;
  margin-bottom: 80px;
 }

 .store_contents_left {
   width: auto;
   margin: auto;
   vertical-align: center;
 }

$('.store_img_top').hide();
    $('.store_top').hover(function(){
      var idx=$('.store_top').index(this);
      $('.store_img_top').eq(idx).fadeIn(100);
    },function(){
      $('.store_img_top').fadeOut(100);
    });

試したこと

メソッドチェーンで下記を追加しても、エラーメッセージはでていませんが、fadeIn,fadeOutしか動きません、、

$('.store_img_top').hide();
    $('.store_top').hover(function(){
      var idx=$('.store_top').index(this);
      $('.store_img_top').eq(idx).fadeIn(100).css({ transform: "scale(1.1, 1.1) rotate(1deg)"});
    },function(){
      $('.store_img_top').fadeOut(100).css({ transform: "scale(1.1, 1.1) rotate(1deg)"});
    });

Comments

[yambejp]

参考サイトをあげていただいていますが、どの動きかよくわかりません
具体的にどう動くのが正解なのでしょうか？
メニューのhoverで画像がfadein/outするのは問題なくできているように
見えますが・・・

[mickey25]

説明が分かりにくくて申し訳ございません。
JOURNALの下、ONLINE SHOPの上の LOCATION部分になります。
KAMAKURA Kanagawa
KAMAKURA HANARE HASE Kanagawa
・
・
・

の部分になります。
fadein/out + 画像が上下左右に移動というような動きを加えたいです。

Answer 1

理解が正しいか分かりませんが、以下が参考になるかもしれません。
fadeIn、fadeOutの第2引数にfunctionを設定するとアニメーションが終了した時点で何かしら実行できます。

$(".store_img_top").hide();
$(".store_top").hover(
    //マウスが乗ったときにしたいこと
    function () {
        var idx = $(".store_top").index(this);
        //$(".store_img_top").eq(idx).stop();//アニメーションを止める
        $(".store_img_top")
            .eq(idx)
            .fadeIn(500, function () {
                //フェードインが終了したときにやりたいこと
                $(".store_img_top").fadeOut(3000, function () {
                    //フェードアウトした時にしたいこと
                });
            });
    },
    //マウスが離れた時にしたいこと
    function () {}
);

Comments

[mickey25]

お返事遅くなってすみません。
アニメーションを連続して実装することができました。
回答ありがとうございました。