我正在使用下面的 js 脚本和 css 来隐藏所有图像的可见性,并且在滚动时它会缓慢显示。它工作正常,但我的问题是它在加载页面时工作一次。我怎样才能让图像淡出并且不仅在页面加载时出现一次,而且 Action 必须重复。
function showImages(el) {
var windowHeight = jQuery(window).height();
$(el).each(function() {
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 200 > thisPos) {
$(this).addClass("fadeIn");
}
});
}
$(window).scroll(function() {
showImages('.star');
});
.star {
visibility: hidden;
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
@-webkit-keyframes animat_show {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg"/>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Other test</p>
最佳答案
function showImages(el) {
var windowHeight = jQuery(window).height();
$(el).each(function() {
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 200 > thisPos) {
$(this).addClass("fadeIn");
}else{
$(this).removeClass("fadeIn");
}
});
}
$(window).scroll(function() {
showImages('.star');
});
.star {
visibility: hidden;
transition: visibility cubic-bezier(.165, .84, .44, 1) .25s;
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
@-webkit-keyframes animat_show {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg"/>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Other test</p>
关于jquery - 如何使图像褪色,滚动时可见并且应该重复 Action ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52437281/