Jquery 使用航路点逐个淡入多个div(包括图像)
基本上,当用户滚动到页面底部时,我在这里试图做的是一个一个地淡入3个div 我在网上搜索,发现这可以通过使用名为waypoints的jquery插件来实现。然而,我对Jquery完全陌生,我真的不知道该怎么做 如果有人能看看我的代码,告诉我我做错了什么,这将是非常有帮助的 以下是HTML:Jquery 使用航路点逐个淡入多个div(包括图像),jquery,html,jquery-waypoints,Jquery,Html,Jquery Waypoints,基本上,当用户滚动到页面底部时,我在这里试图做的是一个一个地淡入3个div 我在网上搜索,发现这可以通过使用名为waypoints的jquery插件来实现。然而,我对Jquery完全陌生,我真的不知道该怎么做 如果有人能看看我的代码,告诉我我做错了什么,这将是非常有帮助的 以下是HTML: <!--#Div1--> <div class="span4" id="fadein1" style="display:none"> <img src="
<!--#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 -->
试试这个脚本。当滚动到您的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>
<代码>顶部内容1
首要内容1
你的隐藏分区1
你隐藏的第二组
你隐藏的第三组
以下内容1
谢谢!它就像我想要的那样完美地工作。有一个问题是,“方向”和“事件”不是我必须输入的参数吗?在这个例子中,我不应该在方向部分输入“down”吗?它是如何工作的?很高兴它能工作。:)您可以在不使用这些参数的情况下使用,或者如果要添加方向或事件处理程序,可以使用它们。有关详细信息,请查看此处。。。
事件
参数不再在航路点2.x中使用。这是一个旧的1.x的东西。航路点回调现在只接收方向
参数。我知道这个答案没有使用这些参数,只是让您知道。:)
<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>