動畫當我到達一個特定的div

Question

當我到達頁面的第1部分和第2部分時，我希望淡入效果。我發現了一個sloution，但這隻會給動畫只有一個div。我是jquery的新手，我試圖在這兩部分都有這個動畫。

這裏是我的html代碼：

<div></div> 
<h1 id="scroll-to1">PART 1</h1> 
<div></div> 
<h1 id="scroll-to">PART 2</h1> 

這是我用jQuery代碼：

$(window).scroll(function() { 
    var hT1 = $('#scroll-to1').offset().top, 
     hH1 = $('#scroll-to1').outerHeight(), 
     wH1 = $(window).height(), 
     wS1 = $(this).scrollTop(); 
    var hT = $('#scroll-to').offset().top, 
     hH = $('#scroll-to').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS1 > (hT1+hH1-wH1)){ 
    console.log('reach'); 
    $('#scroll-to1').fadeIn(3500); 
    $(window).off('scroll') 
    } 
    if (wS > (hT+hH-wH)){ 
    console.log('reach'); 
    $('#scroll-to').fadeIn(3500); 
    $(window).off('scroll') 
    } 
}); 

Answer 1

jQuery插件是有用。

$('.entry').waypoint(function() { 
    alert('The element has appeared on the screen.'); 
}); 

http://imakewebthings.com/waypoints/