时间戳

首页 > 解决方案 > 滚动淡入/淡出

slideshow - 滚动淡入/淡出

问题描述

我试图让这一系列幻灯片在滚动时淡入/淡出。试图让它逐渐褪色，但没有得到任何结果。

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

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

我试过这个但没有用！我对 Java 的了解有限，所以我不确定如何让每一个都在 scorll 上淡入淡出。任何帮助将不胜感激。

谢谢你，S

标签： slideshowfadeinfadeout

解决方案

欢迎来到社区。

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

请注意，每个方法都有一个在动画完成后调用的可选函数，每个元素匹配调用一次。一种方法可能是在单击时调用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/

推荐阅读