jquery内の別の関数に可変要素を渡します。

Question

ユーザーがページ上のある点を過ぎてスクロールしたときに再生されるアニメーションを含むWebサイトを作成しています。私はこれを動作させることができましたが、jQueryコードでは、これを動作させるための単なる方法は、以下に示すコードを繰り返し使用することでした。

ボックス番号とクラス名の2つのパラメータを取り、それを4回呼び出して特定のボックス番号とクラス名を渡す関数を作成することはできますか？助けのための歓声

$(window).scroll(function() { 
    $(".box1").each(function() { 
    var pos = $(this).offset().top; 
    var winTop = $(window).scrollTop(); 
    if (pos < winTop + 600) { 
     $(this).addClass("slideone"); 
    } 
    }); 

    $(".box2").each(function() { 
    var pos = $(this).offset().top; 
    var winTop = $(window).scrollTop(); 
    if (pos < winTop + 600) { 
     $(this).addClass("slidetwo"); 
    } 
    }); 

    $(".box3").each(function() { 
    var pos = $(this).offset().top; 
    var winTop = $(window).scrollTop(); 
    if (pos < winTop + 600) { 
     $(this).addClass("slidethree"); 
    } 
    }); 

    $(".box4").each(function() { 
    var pos = $(this).offset().top; 
    var winTop = $(window).scrollTop(); 
    if (pos < winTop + 600) { 
     $(this).addClass("slidefour"); 
    } 
    }); 
}); 

.box1, 
.box2, 
.box3, 
.box4, 
{ 
    opacity: 0; 
    animation-fill-mode: forwards; 
} 

.slideone, 
.slidetwo, 
.slidethree, 
.slidefour { 
    animation-duration: 1s; 
    -webkit-animation-duration: 1s; 
    animation-name: slideone; 
    -webkit-animation-name: slideone; 
} 

.slidetwo { 
    animation-delay: 0.3s; 
    -webkit-animation-delay: 0.3s; 
} 

.slidethree { 
    animation-delay: 0.6s; 
    -webkit-animation-delay: 0.6s; 
} 

.slidefour { 
    animation-delay: 0.9s; 
    -webkit-animation-delay: 0.9s; 
} 

@keyframes slideone { 
    0% { 
    opacity: 0; 
    transform: translateY(70%); 
    } 
    100% { 
    opacity: 1; 
    transform: translateY(0%); 
    } 
} 

@-webkit-keyframes slideone { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateY(70%); 
    } 
    100% { 
    opacity: 1; 
    -webkit-transform: translateY(0%); 
    } 
} 

あなたは、このような何かを追加する必要があるクラスを表すために、それらの要素に data属性をすべて .boxN要素に共通するクラスを使用して、と置くことによってこれを乾燥させることができる

Answer 1

：

$(window).scroll(function() { 
    $(".box").each(function() { 
    var $box = $(this); 
    if ($box.offset().top < $(window).scrollTop() + 600) { 
     $box.addClass($box.data('class')); 
    } 
    }); 
}); 

<div class="box" data-class="slideone">One</div> 
<div class="box" data-class="slidetwo">Two</div> 
<div class="box" data-class="slidethree">Three</div>