Question

我有两个对象在滚动过去时我想要淡入，使用下面的代码可以正常工作，但我想要的是第一个对象.cta-first以淡入现在的方式，但是然后第二个对象.cta-second在第一个对象之后淡入。

我不介意第一个物体在opacity: 1时或在短时间（即1秒）后第二个物体淡入。两个对象都在同一行，因此将同时滚动到。

如果有人能告诉我如何使用下面的代码完成此操作，我真的很感激，谢谢。

$(document).ready(function () {
  $(window).scroll(function () {
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    $('.cta-first').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $(this).animate({
          'opacity': '1'
        }, 2000);
      }
    });

    $('.cta-second').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $(this).animate({
          'opacity': '1'
        }, 2000);
      }
    });

  });
});

以下是目标对象的HTML。

<section class="sidebar">

  <div class="sidebar-module">
    <a href="/contact"><span class="cta-first">This text</span><span class="cta-second">That text</span></a>
  </div>

</section>

更新

所以我编辑了@ pdoherty926建议的代码，现在看起来如下所示。如果我重新加载页面，如果对象在视图中，它可以正常工作 - 它们一个接一个地淡入淡出，但如果我重新加载并向下滚动页面顶部，则只显示.cta-first， opacity: 1未应用于第二个。

有人能看出为什么会这样吗？感谢。

要添加，问题出在Chrome和Safari桌面浏览器上，它在Safari iOS上运行良好。

$(document).ready(function () {
  $(window).scroll(function () {

    var bottom_of_window = $(window).scrollTop() + $(window).height();

    $('.cta-first').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $.when($('.cta-first').animate({
          opacity: 1
          }, 2000))
          .then(function () {
            $('.cta-second').animate({
            opacity: 1
          }, 2000);
        });
      }
    });

  });
});

Answer 1

您可以使用jQuery的Promise API：

$(document).ready(function () {
    $(window).scroll(function () {

        var bottom_of_window = $(window).scrollTop() + $(window).height();
        var bottom_of_object = $('.cta-first').offset().top + $('.cta-first').outerHeight();

        if (bottom_of_window > bottom_of_object) {

            // stop and do not complete animations on both elements
            $('.cta-first, .cta-second').stop(true, false);

            $.when($('.cta-first').stop(true, true, false).animate({
              opacity: 1
            }, 2000))
            .then(function () {
                $('.cta-second').animate({
                    opacity: 1
                }, 2000);
            });
        }
    });
});

Fiddle

Answer 2

您可以使用fadeIn（）函数的回调来启动第二个对象的动画。

示例：

  $('.cta-first').each(function () {
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $(this).fadeIn(2000, function () {
           //start animating the second item here.
        });
      }
    });

问题是你是在循环遍历每个类，所以你必须重新构建第二个对象与第一个对象相比的方式。需要看到你的html。

编辑：根据您发布的HTML，我可以假设您只有1个cta-first＆amp; 1 cta-second项目？

    $(document).on('scroll','.sidebar-module', function(){
      var bottom_of_object = $('.cta-first').offset().top + $(.cta-first).outerHeight();
      if (bottom_of_window > bottom_of_object) {
        $('.cta-first').fadeIn(2000, function () {
           //this gets executed when the first one is complete:
           $('.cta-second').fadeIn(2000, function() {
               //complete event of the second fadeIn in case you want to do something here.
           });
        });
      }
    });

注意：我还没有对此进行过测试，而且它是匆匆写的:)但它应该让你知道如何使用它。

当使用jQuery滚动时，让两个对象动画，一个接一个地动画

2 个答案: