QA@IT

ウィンドウサイズで分岐させた上で、スクロール時のアニメーションをループ

7952 PV

ウィンドウサイズで分岐させ、スクロールアニメーションを実装するところまでは出来たのですが、その後そのアニメーションをループさせる方法が分かりません。お手数をお掛けいたしますがご教授いただけませんでしょうか。

動作しているコード

$(function(){
    $('.box').css("left","-200px");
    $(window).on('scroll resize', function(){
        $('.box').each(function(){
            var ww = $(window).width();
            var wh = $(window).height();
            var ws = 1000;
            var ef = $(this).offset().top;
            var sc = $(window).scrollTop();
            if (ww <= ws) {
                if (sc > ef - wh + 100){
                    $(this).animate({
                        "left": "110vw"
                    }, 20000, 'linear');
                }
            } else {
                if (sc > ef - wh + 100){
                    $(this).animate({
                        "left": "110vw"
                    }, 40000, 'linear');
                }
            }
        });
    });
});

上記にsetIntervalでループさせようとしたのですが、下記のように設置したものの、動作しません。
その他setIntervalをsetTimeoutにしても同様の為、行き詰まっております。

動かないコード

$(function(){
    $('.box').css("left","-200px");
    $(window).on('scroll resize', function(){
        $('.box').each(function(){
            var ww = $(window).width();
            var wh = $(window).height();
            var ws = 1000;
            var ef = $(this).offset().top;
            var sc = $(window).scrollTop();
            if (ww <= ws) {
                if (sc > ef - wh + 100){
                    setInterval(function(){
                        $(this).animate({
                            "left": "110vw"
                        }, 20000, 'linear');
                    },20000);
                }
            } else {
                if (sc > ef - wh + 100){
                    setInterval(function(){
                        $(this).animate({
                            "left": "110vw"
                        }, 40000, 'linear');
                    },40000);
                }
            }
        });
    });
});
ウォッチ

この質問への回答やコメントをメールでお知らせします。