jquery eachがうまく設定できません。

質問

$('.group').each(function(i){
var targetOn = $('.box-' + i);
$(window).scroll(function(){
var targetOnPosition = $(targetOn).offset().top - $(window).height(); ;
if ($(window).scrollTop() > targetOnPosition + 10) {
$('.box-' + i).fadeIn(1000);
} else {
$('.box-' + i).hide()
}
});
});

上記の$('.box-' + i)で.box-1、.box-2、.box-3それぞれが表示位置に来たときにフェードインするように、それ以外のときは消すようにしたいのですがうまくいきません。
$('.box-' + i)の部分を$('.box-1')などにするとうまくいきます。

記述の問題だと思うのですが、行き詰まったので質問させてください。
よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

スクリプトだけからではよくわかりませんが…

if ($(window).scrollTop() > targetOnPosition + 10) {
$('.box-' + i).fadeIn(1000);
} else {
$('.box-' + i).hide()
}

の部分を

if ($(window).scrollTop() > targetOnPosition + 10)
targetOn.fadeIn(1000); else targetOn.hide();

のようにしたら動きませんか？