jQueryを使って左から順にfadeInさせたいのですが、同時にfadeInしてしまいます。

Question

scssはコンパイル済みです
よろしくお願いします。

$(function(){
	$(window).scroll(function(){
    	$(".work").each(function(i){
    		var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if(scroll>targetElement-windowHeight+250){
            	$(this).delay(300*i).css('opacity','1');
            	$(this).delay(300*i).css('transform','translateY(0)');
            }
    	});
    });
});

<section class="works" id="works">
		<h1>Works</h1>
		<div class="row">
			<a href="work1.html" class="work col-lg-4 mt-5">
				<img src="image/iSara.png">
			</a>
			<a href="work2.html" class="work col-lg-4 mt-5">
				<img src="image/portfolio.png">
			</a>
			<a href="work3.html" class="work col-lg-4 mt-5">	
				<img src="image/trial.png">
			</a>
		</div>
	</section>

.works{
		height:auto;
		background-color: #fff;
		font-family: "Times";
		color:#333;
		opacity:0.7;
		overflow: hidden;
		padding:0 0 110px 0; 
		h1{
			text-align: center;
			width:56%;
			padding:15px 0 15px 0;
			margin: 60px auto 40px auto;
			font-size: 50px;
			border-bottom: solid 2px rgba(51,51,51,0.4);
		}
		.row{
			width:90%;
			margin:0 auto 0 auto;
			a{
				transition: 1s;
				opacity:0;
				transform:translateY(80px);
				img{
					width:100%;
					object-fit: cover;
					height:260px;
				}
			}
		}	
	}

Answer 1

こんにちは、setTimeoutでずらしてはどうでしょうか？
以下がjQueryのコードになります。

$(function () {
    $(window).scroll(function () {
        $(".work").each(function (i) {
            var self = this;
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 250) {
                window.setTimeout(function () {
                    $(self)
                        .delay(300 * i)
                        .css("opacity", "1");
                    $(self)
                        .delay(300 * i)
                        .css("transform", "translateY(0)");
                }, i * 700);
            }
        });
    });
});

Comments

[reo_fukkase]

ありがとうございました！

Answer 2

インデックス順に処理するならこうしてみては？

Comments

[yambejp]

$(function(){
$(".work").each(function(i){
$(this).css('opacity',0).delay(1000*i).queue(function(){
$(this).css('opacity',1).dequeue();
});
});
});

[reo_fukkase]

回答ありがとうございます。
$(this).delay(300*i).css('opacity','1');
$(this).delay(300*i).css('transform','translateY(0)');の部分を、
$(this).css('opacity',0).delay(1000*i).queue(function(){
$(this).css('opacity',1).dequeue();
});これに置き換えるということでしょうか？