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

Question

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

動作しているコード

$(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);
				}
			}
		});
	});
});

Answer 1

$(this).animate({... の this がおそらく window オブジェクトになっているので動かないんだろうなと思います。

this を束縛してやるか、変数に退避してやる必要があります。
スマートに書くなら bind() メソッドを使ったり、IE8 以下の対応を考えるなら $.proxy() を使うと良いでしょう。

setInterval((function(){
    $(this).animate({
        "left": "110vw"
    }, 20000, 'linear');
}).bind(this), 20000);

• Function.prototype.bind() - JavaScript | MDN
• $.proxy() | jQuery 1.9 日本語リファレンス | js STUDIO

Comments

[tomoyas]

yhg様

ご回答頂きまして誠にありがとうございます。
ご教授いただきました通り記述しましたところ、一回目のアニメーションは動作致しました。
しかし、ループでのアニメーションは実行されませんでした。

下記記述内容です。

$(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');
}).bind(this), 20000);
}
} else {
if (sc > ef - wh + 100){
setInterval((function(){
$(this).animate({
"left": "110vw"
}, 40000, 'linear');
}).bind(this), 40000);
}
}
});
});
});

自分でsetIntervalの記述をした際は、アニメーション自体が全く動作しなくなったのに対して、ご教授頂いたbind()メソッドを使用したものではアニメーションが動作したので、誤った記述が、正しい記述になったのだとは思いますが、ループしない原因がますます分からなくなってしまいました。

参考で記載頂いたサイトも読み直してみます。
ご回答いただき誠にありがとうございました。

[yhg]

"left": "110vw" で固定値になっているからではないでしょうか。
ループ自体はうまくいっているけど、動く先が同じ場所なのでアニメーションしないんだと思います。