jQuery サムネイルクリックで画像切替時、３回目のクリック以降classが外れない

Question

いつもお世話になっております。

現在、サムネイルをクリックしてメイン画像を切り替える実装をしております。
画像切替時のアニメーションをクラス(.scroll_on)のつけ外しで管理したく、以下のコードを書きました。

codepen

しかし、サムネイルを２回クリックまでは理想の挙動になりますが、
３回目から.scroll_onが外れないためアニメーションが動作いたしません。

<div class="bl_garally_imgUnit">
  <div id="mainImg" class="bl_garally_mainImg">
    <img src="https://placehold.jp/1500x800.png" alt="メインイメージ">
  </div>
  <ul id="thumbs" class="bl_garally_thumbUnit">
     <li class="current"><img src="https://placehold.jp/1500x800.png" alt="サムネイル"></li>
     <li><img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="サムネイル"></li>
     <li><img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></li>
   </ul>
  </div>

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

$(document).ready(function () {
  $('#thumbs img').on('click', function () {
    //mainに切り替えるimgのsrc取得
    img = $(this).attr('src');

    //currentクラス付け替え
    $('#thumbs li').removeClass('current');
    $(this).parent().addClass('current');

    $('#mainImg img').attr('src', img);
    $('#mainImg').addClass('scroll_on');
    $('#mainImg').delay(1000).queue(function () {
      $('#mainImg').removeClass('scroll_on');
    });
  });
});

@keyframes scroll_img {
  100% {
    transform: translateX(100%);
  }
}

.bl_garally_mainImg {
  overflow: hidden;
  position: relative;
  &.scroll_on::before {
    animation: scroll_img 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
}

.bl_garally_thumbUnit {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  & img {
    // float: right;
    width: 80px;
    margin-left: 10px;
  }
  & li.current img{
    border: 2px solid #333;
  }
}
.bl_garally_imgUnit {
  max-width: 500px;
  margin: auto;
}
img {
  width: 100%;
  height: auto;
}

$('#thumbs img')クリックイベントの最初に$('#mainImg').removeClass('scroll_on');を
追加してみても挙動は変わらず、また動的に追加した項目でもありません。

どうすれば３回目以降も.scroll_onが外れるようにできますでしょうか。

何卒よろしくお願いいたします。

Answer 1

キューを終了する必要があります

$('#mainImg').removeClass('scroll_on').dequeue();

もしくはdelayをsetTimeoutに変更

setTimeout(function() {
  $('#mainImg').removeClass('scroll_on');
},1000);

Comments

[uni..]

できました！！ありがとうございますm(__)m