滚动淡入/淡出

Question

我正在尝试使这一系列幻灯片在滚动中淡入/淡出。试图使其逐渐褪色，但与此无关。

https://thetulip.community/Shannon-Garden-Smith

<script>
$(window).scroll(function() {
    $(".image 1").css({
    'opacity' : 0.5-(($(this).scrollTop())/20)
    });          
});
</script>

我尝试过，但无济于事！我对Java的了解有限，所以我不确定如何在scorll上淡入淡出。任何帮助将不胜感激。

谢谢，S

Answer 1

欢迎来到社区。

我不确定您要在幻灯片演示文稿中使用哪个库，但是jQuery内置了用于淡入或淡出HTML元素的方法。您可以在这里查看它们：

• https://api.jquery.com/fadeIn/
• https://api.jquery.com/fadeout/

请注意，每个方法都有一个可选函数来在动画完成后调用，每个元素匹配都调用一次。一种方法是在单击时调用fadeOut（），然后在fadeOut方法的完整功能内调用fadeIn（）。例如：

var images = [
  "https://freight.cargo.site/w/750/i/0c4f83626e13ce4aa69fee4a84d02618c43afa3ff33d3c6bbd8fd6e265aa5538/01-03-downwrong.jpg",
  "https://freight.cargo.site/w/750/i/3aa2564a6c11b13ef5c44820c69b00563e89ddd572372d52d60b6a0bfd80d1bc/01-04-downwrong.jpg"
]

var i = 0;

$(function() {
    $('img').attr('src', images[i]);
});

$('img').click(function() { 

    $(this).fadeOut('slow', function() {

        i = i === images.length - 1 ? 0 : i + 1;
        $('img').attr('src', images[i]);
        $(this).fadeIn('slow');
  });
});

这里是小提琴：https://jsfiddle.net/matthewmeppiel/n28hg4qj/5/