ウィンドウサイズで分岐させ、スクロールアニメーションを実装するところまでは出来たのですが、その後そのアニメーションをループさせる方法が分かりません。お手数をお掛けいたしますがご教授いただけませんでしょうか。
動作しているコード
$(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); } } }); }); });
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/15 18:37
2018/05/15 19:08