我有这段代码,每当第一个元素出现在屏幕上时,它会显示所有具有相同类的元素。 我真正想做的是在屏幕上出现时单独显示每个元素,而不是同时显示所有元素。我希望我能够清楚地解释清楚。
这是html:
<div class="scrollfx">ELEMENT</div>
<div class="scrollfx">ELEMENT</div>
的CSS:
body {
height:1600px;
}
.scrollfx {
width: 100%;
height: 150px;
background:blue;
position: relative;
top: 50px;
font-size:4em;
margin-top:500px;
filter: opacity(0);
}
.scrollfx.fadein {
filter:opacity(1);
transition: all 2.5s ease;
}
jquery的:
$(document).scroll(function () {
var el = $('.scrollfx');
var bottom = el.offset().top + el.outerHeight(true);
var y = $(this).scrollTop();
$('.scrollfx').each(function () {
if (y = bottom) {
$(this).addClass('fadein');
}
});
});