jQuery windowスクロールした時のクラス追加・削除

Question

前提・実現したいこと

お世話になります。
スクロールが止まった時に、特定の要素にクラスを追加し、数秒後（秒数任意）に追加したクラスを
削除するような設定を行いたいのですが、クラスを削除する設定方法がわかりません。

クラスが追加された要素はCSSでのアニメーションが始まりますが、アニメーションはループせず
一回で終わってほしいのでクラスを削除してアニメーションを止める想定です。

アニメーション自体はスクロールする度に動いてほしいですですが、クラスが追加されるタイミングはスクロール中
ではなく、スクロールが止まったタイミングとなります。

クラス追加からクラス削除までの流れ

1. 画面をスクロールしスクロールを止める
2. 特定の要素にクラス追加
3. 数秒後に追加したクラス削除

該当のソースコード

<div class="fix-img"><img src="img/test.png" width="225" height="347" alt=""/></div>

.gel {
   position: absolute;
   z-index: 1;
   animation: skew 2.3s linear infinite;
}
 
@keyframes skew {
    0% {transform: skew(0deg, 0deg);}
    5% {transform: skew(5deg, 4.2deg);}
    10% {transform: skew(-4deg, -3deg);}
    15% {transform: skew(3deg, 2.2deg);}
    20% {transform: skew(-2deg, -1.5deg);}
    25% {transform: skew(0.9deg, 0.9deg);}
    30% {transform: skew(-0.6deg, -0.6deg);}
    35% {transform: skew(0.3deg, 0.3deg);}
    40% {transform: skew(-0.2deg, -0.2deg);}
    45% {transform: skew(0.1deg, 0.1deg);}  
    50% {transform: skew(0deg, 0deg);}
}

var timer = false;
$(window).scroll(function(){
    if( timer !== false ){
        clearTimeout( timer );
    }
    timer = setTimeout(function(){
        $(".fix-img img").addClass("gel")
    }, 200 );
});

試したこと

単純に「.removeClass」を入れてクラスを削除するようにしてみました。
動きとしましては、ある程度希望の動き（クラス追加～クラス削除まで）できたのですが、
クラスが削除される秒数になる前にスクロールをするとクラスが削除された状態のままになったり、
クラス追加された要素の挙動がおかしくなりました。

var timer = false;
$(window).scroll(function(){
    if( timer !== false ){
        clearTimeout( timer );
    }
    timer = setTimeout(function(){
        $(".fix-img img").addClass("gel")
    }, 200 );

    setTimeout(function(){
        $(".fix-img img").removeClass("gel")
    }, 1500 );
});

補足情報（FW/ツールのバージョンなど）

上手く説明出来ていないかもしれませんが、宜しくお願い致します。

Comments

[m.ts10806]

コードのインデントが一部おかしいので揃えてもらえますか？

[sakio6]

ご指摘ありがとうございます。インデント修正試みてみましたが、勉強不足の為なにが正解かイマイチ理解しておりません。また不備が御座いましたらご指摘いただけますと幸いです。

[m.ts10806]

ありがとうございます。インデントこれで良いと思います。（フォーマッターがあるツールとか整形Webサービスを使うと早いですね）

[sakio6]

インデントを揃えるツールなどがあるのですね。勉強になりました。ありがとうございます。

[m.ts10806]

[言語名 整形]（javascript 整形）で検索するとそういうサービスもありますし、あと大体の高機能エディタ（IDEと呼ばれるもの）にはフォーマッターがついてます。

[m.ts10806]

そういえば「スクロールが止まった」という判定はどこで行っているのでしょうか？今のところ「スクロールされた」イベントしかないようですが。

[sakio6]

「スクロールされた」の発火時間を遅らす事のみで対応可能と思い込んでおり、その方法が記載されている記事だけを参考にして作成しておりました。言われてみれば「止まった」で考える必要がありました。やりたい事と、方法検索が合ってないですね。

[m.ts10806]

ちょっとその方向でやり方をかえてみてください。（回答になってなくてすみません）

[sakio6]

もっと頭を柔軟にして色々考えてみたいと思います。有難うございました。

[macaron_xxx]

sakio6さんのやり方で間違ってないですよ。止まったイベントを取るのは難しいので、スクロールイベント中で過去に指定したタイマーをリセットしています。これによって、タイマーが発火するタイミングはスクロールが終わった後ということになります。

[sakio6]

iamaimi様、お返事遅くなりました。やり方的には間違ってないのですね。少し安心しました。色々調べてみても「これ！」と言うのが無く、でも希望する動きはほぼほぼ出来ているのでこれ以上追求するか、一旦良しとするか悩んでいました。有難うございました。

Answer 1

100点の解決では無さそうなのですが、一応解決となりました。
最終的には下記のコードでの対応となりました。
参考にはならなそうですが。。。

アドバイス頂いた方々ありがとうございました。

var timer = false;
$(window).scroll(function(){
    
    if( timer !== false ){
    clearTimeout( timer );
    }
    
    timer = setTimeout(function(){
        
        console.log('scroll');
        $(".fix-img img").addClass("gel")

        setTimeout(function(){
        $(".fix-img img").removeClass("gel")
        }, 2300 );
        
    }, 200 );


});