使用航点逐个淡入多个div（包括图像）

Question

基本上，我在这里要做的是在用户滚动到页面底部时逐渐淡入3格。

我在网上搜索，发现这可以通过使用一个名为waypoints的jquery插件来完成。然而，我在Jquery方面是全新的，我真的无法弄清楚如何做到这一点。

如果有人可以看看我的代码，并告诉我我做错了什么，这将是非常有益的！

下面是HTML：

<!--#Div1--> 
    <div class="span4" id="fadein1" style="display:none"> 
    <img src="images/41.jpg" alt="41%" style="margin-right: 10px;" id="41"> 
     <h2>Boba</h2> 
     <p>We strive for <b>perfection</b> when we prepare our boba 
to use. Not under, nor overcooked to mush. Just right and still chewy.</p> 

    </div><!-- /.span4 --> 
     <div class="span4" id="fadein2" style= "display:none;"> 
     <img src="images/43.jpg" alt="43%" style="" id="43"> 
      <h2>Tea Leaves</h2> 
      <p>Tea Powders? <b>NEVER!</b> Premixes? <b>Absolutely not!</b> 
We use only the best quality house blend tea leaves.</p> 

    </div><!-- /.span4 -->  

    <div class="span4" id="fadein3" style="display:none;"> 
      <img src="images/44.jpg" alt="44%" style="" id="44"> 
      <h2>Customized Blend</h2> 
      <p>It is our goal to customize your drink the way 
<b>you</b> want it to be. 75% sugar? Light ice? You name 
it, and we will make it happen!</p> 

    </div><!-- /.span4 --> 

这里是JS

$(document).ready(function() { 

    // call waypoint plugin 
    $("#fadin1").waypoint(function(bottom-in-view) { 
     $(this).fadein(1500); 
    }, { 
     offset: 'bottom-in-view' 
    } 

    $("#fadin2").waypoint(function(bottom-in-view) { 
     $(this).fadein(2000); 
    }, { 
     offset: 'bottom-in-view' 
    } 

    $("#fadin3").waypoint(function(bottom-in-view) { 
     $(this).fadein(2500); 
    }, { 
     offset: 'bottom-in-view' 
    } 
); 

Answer 1

试试这个脚本。滚动到达div时你的div将会淡入淡出。

我想你应该有一些内容的顶部和底部这些隐藏的div。

$(document).ready(function() { 
$('#fadein1').waypoint(function(event, direction) { 
    $(this).fadeIn(1500); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 

$('#fadein2').waypoint(function(event, direction) { 
    $(this).fadeIn(2000); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 

$('#fadein3').waypoint(function(event, direction) { 
    $(this).fadeIn(2500); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 
}); 

HTML应该是这样......

<div>Top content 1</div> 
<div>Top content 1</div> 

<div>Your hidden div 1</div> 
<div>Your hidden div 2</div> 
<div>Your hidden div 3</div> 

<div>Below content 1</div>