jQuery: delayとqueueの使い方

jQuery で5秒後とかに addClass したいとき · Issue #61 · shikakun/tips · GitHub

https://github.com/shikakun/tips/issues/61

方法1

$('#selector').delay(5000).queue(function(next) {

    $(this).addClass('hogemoge');

    next();

});

方法2

$('#selector').delay(5000).queue(function() {

    $(this).addClass('hogemoge').dequeue();

});

また、CSSアニメーションの終了を検知する方法もあります。

// transition終了判定

$('.js-item').on('transitionend', function() {

  $('.js-stateTxt').text('transitionのボタンを押したね！').addClass('is-end');

});

// keyframes終了判定

$('.js-item').on('animationend', function() {

  $('.js-stateTxt').text('keyframesのボタンを押したね！').addClass('is-end');

CSSアニメーションの終了を検知してみよう！ | やくにたたないメモ帳

https://not-memopad.net/2018/06/11/memo-8/