jquery의 다른 함수에 가변을 전달합니다.

Question

사용자가 페이지의 특정 지점을지나 스크롤 할 때 재생되는 일부 애니메이션이 포함 된 웹 사이트를 만듭니다. 이 일을 가지고 있지만 jQuery 코드에서 그것을 작동시킬 수있는 유일한 방법은 아래에 표시된 반복 된 코드입니다.

어쨌든 상자 번호와 클래스 이름에 대한 두 개의 매개 변수를 사용하는 함수를 만들 수 있습니까? 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>