0
我正在寻找三张图片，我必须fadeIn()和delay()，但它们只是像正常一样加载。我不确定我做错了什么。我将他们的div设置在我的函数中，并在每个图像div类中添加了第二组类。fadeIn（）不适用于一套div
有谁看到我做错了吗？
$(function() {
\t var oTop = $('#home-img-block-section').offset().top - window.innerHeight;
$(window).scroll(function(){
\t \t var pTop = $('body').scrollTop();
\t console.log(pTop + ' - ' + oTop);
\t \t if(pTop > oTop){
\t \t imgDelays();
\t \t }
\t });
});
function imgDelays(){
\t $('.fadeBlock1').delay(300).fadeIn(300);
\t $('.fadeBlock2').delay(800).fadeIn(300);
\t $('.fadeBlock2').delay(1300).fadeIn(300);
};
//Image resizing
$('.home-img-block img').addClass(function() {
return (this.width/this.height > 1) ? 'wide' : 'tall';
});#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 750px;
}
.home-img-block {
width: 33.33%;
float: left;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-container {
position: relative;
overflow: hidden;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-container:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-container:hover:after {
opacity: 1;
}
.home-img-block img {
display: block;
transition: all 1s ease;
}
.home-img-block:hover img {
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
overflow: hidden;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
#home-img-block-wording-container {
width: 100%;
height: 300px;
}
.home-img-wording-blocks {
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.home-img-wording-block-title {
padding-top: 30px;
font-size: 1.7em;
}
.home-img-wording-block-description {
padding: 25px 50px 0 50px;
font-size: 1.1em;
color: #5d5d5d;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="home-img-block-section">
\t <div id="home-img-blocks">
\t \t <div class="home-img-block fadeBlock1">
\t \t <div data-content="FIND OUT MORE" class='home-img-container'>
\t \t \t <img src="http://optimumwebdesigns.com/images/test1.jpg">
\t \t \t <div class="overlay"></div>
\t \t </div>
\t \t <div class="home-img-wording-blocks">
\t \t \t <div class="home-img-wording-block-title">WEB DESIGN</div>
\t \t \t <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
\t \t </div>
\t \t </div>
\t \t <div class="home-img-block fadeBlock2">
\t \t <div data-content="FIND OUT MORE" class='home-img-container'>
\t \t \t <img src="http://optimumwebdesigns.com/images/test2new.jpg">
\t \t \t <div class="overlay"></div>
\t \t </div>
\t \t <div class="home-img-wording-blocks">
\t \t \t <div class="home-img-wording-block-title">ECOMMERCE</div>
\t \t \t <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
\t \t </div>
\t \t </div>
\t \t <div class="home-img-block fadeBlock3">
\t \t <div data-content="FIND OUT MORE" class='home-img-container'>
\t \t \t <img src="http://optimumwebdesigns.com/images/test3new.jpg">
\t \t \t <div class="overlay"></div>
\t \t </div>
\t \t <div class="home-img-wording-blocks">
\t \t \t <div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
\t \t \t <div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
\t \t </div>
\t \t </div>
\t </div>
\t </div>
我需要的窗口滚动的一部分。谢谢，我忘了把它设置为'display：none;' – Becky
没有probs，很高兴我能帮忙！ – beercohol