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

我有两个对象，我想在滚动过去时淡入，使用下面的代码可以很好地工作，但是我想要的是第一个对象

.cta first

淡入当前的淡入状态，但是第二个对象

.cta second

在第一个对象之后淡入

我不介意第二个对象在第一个对象处于

不透明度：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>

您可以使用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);
            });
        }
    });
});

可以使用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，我可以假设你只有一个cta第一项和一个cta第二项吗

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

注意：我还没有测试过这个，它是匆忙编写的：），但它应该会给你一个如何使用它的想法
 如前所述添加了HTML-如果有帮助的话。我只知道基本的js，所以如果可能的话，最好需要完整的工作代码。谢谢。我刚才很快就试过了，但没能成功，但明天早上我会再看一次。谢谢你的帮助。我试着摆弄代码，但似乎无法让它工作。谢谢你的帮助。我知道这是怎么回事，不过我不知道如何在上面的代码中实现它，因为我只是一个js初学者。谢谢。我已经让你的代码部分工作（见我上面的更新），如果你能看到为什么它不能完全工作，我将不胜感激的答复。谢谢。谢谢你，它几乎可以正常工作了。如果重新加载时该区域在视野范围内，则工作正常；然而，如果我向下滚动到它，似乎
.cta first
已经可见，因此立即
.cta second
淡入。这是在桌面浏览器上，在iOS上它工作得很好。太棒了！谢谢你的帮助。
    $(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.
           });
        });
      }
    });