一秒後に実行するようにしたところ全く動かない

質問

一秒後に実行するようにしたところ全く動かなくなってしまいました。

・これは動く
//fadein-from-スクロール350後に実行
$(function(){
$(window).scroll(function (){
$('.js-translate3d-lower-right').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
$(this).addClass('scrollin');
}
});
});
});

・これが動かない
//一秒後に実行
// setTimeout(function(){
// $(this).addClass('scrollin');
// },1000);

//fadein-from-スクロール350後に実行
$(function(){
$(window).scroll(function (){
$('.js-translate3d-lower-right--delay-one-s').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 350){
//一秒後に実行
setTimeout(function(){
$(this).addClass('scrollin');
},1000);
}
});
});
});

・下記に間違いがあるのでしょうか？
if (scroll > elemPos - windowHeight + 350){
//一秒後に実行
setTimeout(function(){
$(this).addClass('scrollin');
},1000);
}

回答No.1

pringlez · ベストアンサー

ざっくり言うとthisの指し示す内容が変わってしまっているからでしょうね…。対策でいうと、クロージャーなどを使って使用したい値を固定するなどの対策が必要です。

※この説明で分からない場合には、JavaScriptの基礎を勉強した方がいいと思います。

初心者の方であることを前提に、コードも書いてしまいますと、たぶんこんな感じで動くと思います。JavaScruptの断片的なコードしか提示してくれていないため動作確認していないので、もしかしたら間違ってるところがあるかもしれませんが、おおむねそんな感じです。

setTimeout((function(self) {
　　return function(self) {
　　　　$(self).addClass('scrollin');
　　}
})(this), 1000);

表示用に全角空白でインデントをしていますので、そこだけ編集してください。書けば動くと思いますが、何がどう違うのかを自分で理解できるよう、本当に勉強した方がいいと思います。