Wie setze ich Argumente zu einer benutzerdefinierten jquery Funktion und dann diese Funktion auf scrollen und übergeben Sie einige Argumente

Question

Ich habe eine benutzerdefinierte Funktion, die ich so dynamisch wie möglich machen möchte, weil, wie Sie jetzt sehen können, wann immer es kommt zum Triggerpunkt, die beiden Textzeilen kommen beide zur selben Zeit.

Ich möchte die zweite Textzeile ein wenig warten (vielleicht mitten in der ersten Zeile der Textanimation), bevor es beginnt, die Funktion zu starten.

Meine Lösung besteht darin, Parameter festzulegen, wenn die Funktion erstellt wird, um für jede neue Instanz der Funktion unterschiedliche Werte zu übergeben und wahrscheinlich eine Verzögerung oder eine Warteschlange dazwischen zu setzen, um zu verhindern, dass sie gleichzeitig ausgeführt werden.

heißt $(document).scroll(revealTextOnScroll(paragraph1, overlay1);
$(document).delay(2000).scroll(revealTextOnScroll(paragraph2, overlay2);

Ist das möglich?

https://codepen.io/alexyap/pen/jmQqvQ?editors=0010

$(document).ready(function(){ 

    var text = $("p"); 
    var overlay = $(".someYellowOverlay"); 
    var flag = false; 

    $(document).scroll(revealTextOnScroll); 

    function revealTextOnScroll() { 
    var scrollPos = $(document).scrollTop(); 

    if (scrollPos >= 250 && flag === false) { 
     flag = true; 
     revealText(); 
    } else if (scrollPos < 250) { 
     flag = false; 
     $(text).css("display", "none"); 
     $(overlay).css("transform-origin", "left center"); 
    } 

    function revealText() { 
     $(overlay).addClass("someAnimation").delay(250).queue(function(next){ 
     $(this).css("transform-origin", "right center"); 
     next(); 
     }).delay(125).queue(function(next){ 
     $(text).css("display", "block"); 
     next(); 
     }).delay(250).queue(function(next){ 
     $(this).removeClass("someAnimation"); 
     next(); 
     }) 
    } 
    } 

}) 

Answer 1

Wenn Sie definieren diese:

var overlay = $(".someYellowOverlay"); 

overlay ein einzelnes Element halten kann oder eine Sammlung (viele Elemente).

Übrigens müssen Sie nicht nach einem Lookup für Element nachher wiederholen.
$(overlay) ist nutzlos ... Sie können overlay direkt verwenden.

Jetzt denken Sie daran, dass es eine Sammlung sein kann, also was Sie tun werden, wird auf jedem von ihnen gelten.

Deshalb nahm ich stattdessen die Eltern.
Ich kann jetzt durch sie "radeln", um die Verzögerungen anzuwenden, die ich ihren Kindern wünsche.

Hier ist der Code, mit dem Sie in CodePen spielen können.
Fühlen Sie sich frei zu fragen, wenn Sie Fragen haben.
;)

$(document).ready(function(){ 

    var text = $("p"); 
    var overlay = $(".someYellowOverlay").parent(); 
    var flag = false; 

    $(document).scroll(revealTextOnScroll); 

    function revealTextOnScroll() { 
    var scrollPos = $(document).scrollTop(); 
    var targetPos = $("header").offset().top; 

    if (scrollPos >= 250 && flag === false) { 
     flag = true; 
     revealText(); 
    } else if (scrollPos < 250) { 
     flag = false; 
     text.css("display", "none"); 
     overlay.children().css("transform-origin", "left center"); 
    } 

    function revealText() { 

     var delayBetweenLines = 2000/overlay.length; 

     for(i=0;i<overlay.length;i++){ 

     overlay.eq(i).children().first().addClass("someAnimation") 

      .delay((i*delayBetweenLines)+250).queue(function(next){ 
      $(this).css("transform-origin", "right center"); 
      next(); 
     }) 
      .delay((i*delayBetweenLines)+125).queue(function(next){ 
      $(this).next().css("display", "block"); 
      next(); 
     }) 
      .delay((i*delayBetweenLines)+250).queue(function(next){ 
      $(this).removeClass("someAnimation"); 
      next(); 
     }) 

     } 
    } 
    } 
});