縦スクロールで表示が変わるスライドショーを実装したい。

Question

縦スクロールで下記のとおりに記事が入れ代わりで表示される機能を実装と考えています。

1. 記事①を下からスクロールで表示
2. 記事①を上へスクロールして非表示、記事②を下からスクロールで表示
3. 記事②を上へスクロールして非表示、記事③を下からスクロールで表示

しかしながら、現状のコードだと記事①と②が同時にスクロールで表示、非表示されます。
原因がわからず、ご意見をいただきたいです。

Code
local.js

(function ($) {
    $(document).ready(function () {
        slide_default_num = /*1*/ 0; // 画面初期表示時に表示するスライド番号
        slide_star_num = /*2*/ 0; // スライドショー開始番号
        slide_end_num = 3; // スライドショー終了番号
        init();
    });

    function init() {
        // すべての記事を非表示
        $('.list-topics li').hide();
        // 1番目の記事を表示
        $('.list-topics li').eq(slide_default_num).show();
        main(); // ← mainを実行するよう追加
    }

    /**
     * メイン処理
     **/
    function main() {
        // 各項目
        $('.list-topics li').hide(); // すべての画像を非表示
        $('.list-topics li').eq(slide_star_num).show(); //最初の画像を表示

        // 画像の縦スクロール
        scroll_up();
        scroll_up2();
        slide_star_num = 1;
        $('.list-topics li').eq(slide_star_num).show();
        scroll_up();
        scroll_up2();
        // 次の画像を設定
        $('.list-topics li').eq(slide_star_num).show();
        slide_star_num = 2;
        scroll_up();
    }

    /**
     * 画像の縦スクロール
     *
     **/
    var scroll_y = 0;

    function scroll_up() {
        $('.list-topics li')
            .eq(slide_star_num)
            .css({
                top: '200px'
            })
            .animate({
                top: 0
            }, 2000); 
    }
    function scroll_up2() {
        $('.list-topics li')
            .eq(slide_star_num)
            .delay(1500)
            .css({
                top: '0'
            })
            .animate({
                top: '-200px'
            }, 2000); /* ！ */
    }
})(jQuery);

index.php

<?php $args = array(
    'post_type' => 'news',  // 投稿タイプ
    'posts_per_page' => 3, // 表示件数。 -1ならすべての投稿を取得
    'order' => 'DESC');    // 降順(日付の場合、日付が新しい順)?>
<?php $loop = new WP_Query($args);?>

<?php if ($loop->have_posts()) : ?>
		<ul class="list-topics">
<?php while ($loop->have_posts()) : $loop->the_post(); ?>
			<li id="slides"><time datetime="<?php esc_html(the_time('Y-m-d')); ?>"><?php esc_html(the_time('Y.m.d')); ?></time><a href="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></a></li>
<?php endwhile; ?>
        </ul>

<?php endif; ?><?php wp_reset_postdata();?>
</div></div>

style.css

#page-home #main .sec-topics .sec-in-s .list-topics {
    overflow: hidden;
}
#slides {
    margin: 0 auto;
    padding: 32px 32px 32px 32px;
    align-items: center;
    position: relative;
}

Answer 1

下記にjsを変更して実装しました。

  function switchByWidth() {
    if (window.matchMedia('(max-width: 767px)').matches) {
      //スマホ処理
      var loop = setInterval(function () {
        //li先頭要素のクローンを作成
        var clone = $('.list-topics li:first').clone(true);
        //li先頭要素のマージントップにマイナスを指定しアニメーションさせる
        $('.list-topics li:first').animate(
          {
            marginTop: '-84px',
          },
          {
            duration: 1500,
            complete: function () {
              //処理完了時に先頭要素を削除
              $('.list-topics li:first').remove();
              //クローンをliの最後に追加
              clone.clone(true).insertAfter($('.list-topics li:last'));
            },
          }
        );
      }, 3000);
    } else if (window.matchMedia('(min-width:768px)').matches) {
      //PC処理
      var loop = setInterval(function () {
        //li先頭要素のクローンを作成
        var clone = $('.list-topics li:first').clone(true);
        //li先頭要素のマージントップにマイナスを指定しアニメーションさせる
        $('.list-topics li:first').animate(
          {
            marginTop: '-133px',
          },
          {
            duration: 1500,
            complete: function () {
              //処理完了時に先頭要素を削除
              $('.list-topics li:first').remove();
              //クローンをliの最後に追加
              clone.clone(true).insertAfter($('.list-topics li:last'));
            },
          }
        );
      }, 3000);
    }
  }
  window.onload = switchByWidth;
  window.onresize = switchByWidth;

Answer 2

jsはanimationの完了を待って次の処理をする、なんてことはしてくれません
jQueryは同じ要素のアニメーションであれば順次完了を待って実行してくれますが
違う要素のアニメーションはダメです

jQueryのanimationはjQuery版Promiseを返してくれてるので
thenでアニメーションを数珠繋ぎに繋げることができます

Comments

[scottie320]

回答ありがとうございます。
Promiseでの形を試してみましたが、うまくいかず、下記の方法で実装しました。