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

定义时：

minimax

var overlay = $(".someYellowOverlay");可以包含单个元素或集合（许多元素）。

顺便说一下，你不需要重新查找元素。
overlay无用......您可以直接使用$(overlay)。

现在请记住它可能是一个集合，所以你要做的就是适用于每个集合。

这就是我取代父母的原因我现在可以通过它们“循环”，将我想要的延迟应用到他们的孩子身上。

以下是代码，您可以在CodePen中使用它如果您有任何疑问，请随时询问 ;）

overlay

如何设置自定义jquery函数的参数，然后在滚动时调用该函数并传入一些参数

1 个答案: