Übergabe von Variablen an eine andere Funktion in jquery

Question

Im Erstellen einer Website mit einigen Animationen, die abgespielt werden, wenn der Benutzer einen bestimmten Punkt auf der Seite scrollt. Ich habe dies zu arbeiten, aber in den jQuery-Code nur, wie ich es zur Arbeit bekommen konnte, war mit wiederholtem Code, unten gezeigt.

Gibt es trotzdem ich kann eine Funktion erstellen, die zwei Parameter für die Box-Nummer und den Klassennamen, und das 4 mal aufrufen und nur bestimmte Box-Nummer und Klassenname zu ihm? Jubel für die Hilfe

$(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%); 
    } 
} 

Answer 1

Sie können diese trockene durch die Verwendung einer gemeinsamen Klasse auf allen .boxN Elemente und setzen ein data Attribut auf die Elemente, um die Klasse zu bezeichnen, die so etwas wie dies hinzugefügt werden soll, :

$(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>