有兩個對象在使用jQuery滾動時一個接一個地動畫

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> 

UPDATE

所以我編輯通過@ 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的承諾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

你可以使用淡入（）函數的回調到第二個對象上啓動動畫。

實施例：

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

注意：我沒有測試過這個，它是寫在急於:)但它應該給你一個關於如何使用它的想法。