如何設置自定義jquery函數的參數，然后在滾動時調用該函數並傳入一些參數

Question

我有一個自定義函數，我想盡可能地動態，因為正如你現在所看到的，每當它到達觸發點時，兩行文本都同時進入。

我希望第二行文本在開始啟動函數之前等待一些（可能是文本動畫的第一行的一半）。

我的解決方案是在創建函數時設置參數，以便為函數的每個新實例傳遞不同的值，並且可能在它們之間放置延遲或隊列以阻止它們同時執行。

即$(document).scroll(revealTextOnScroll(paragraph1, overlay1);
$(document).delay(2000).scroll(revealTextOnScroll(paragraph2, overlay2);

這可能嗎？

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

當你定義這個：

var overlay = $(".someYellowOverlay");

overlay可以包含單個元素或集合（許多元素）。

順便說一句，您不需要重做對元素的查找。
$(overlay)是無用的......您可以直接使用overlay 。

現在請記住它可能是一個集合，所以你要做的就是適用於它們。

這就是我取代父母的原因。
我現在可以“循環”通過他們來應用我想要他們的孩子的延遲。

這是代碼，您可以在CodePen中使用它。
如果您有任何疑問，請隨時詢問。
;）

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

      }
    }
  }
});