基本上,我在这里尝试做的是当用户滚动到页面底部时,一个一个地淡入 3 个 div。
我在网上搜索,发现这可以通过使用一个名为 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'
}
);