Javascript/jquery，为什么我的淡入/淡出不起作用?

Question

我搜索并浏览了很多帖子，看到了很多答案，但没有运气。

我让它与 jquery 颜色动画一起工作，但随后我必须链接另一个 id 想要避免的库。

我尝试了无法工作的CSS动画，因为当我删除css类时，它没有机会制作淡出效果。

只有淡入/淡出效果不会发生。背景颜色切换正确。

TL;DR：当访问者从顶部滚动 X 量时，希望我的顶部导航栏从透明背景变为白色背景，然后在访问者靠近页面顶部时返回透明，具有平滑过渡效果。

$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
if ($("#topnav").hasClass('transparent')){
$("#topnav").removeClass('transparent');
$("#topnav").addClass('black').fadeIn(1000);
}
} else if ($(this).scrollTop() < 200) {
if ($('#topnav').hasClass('black')){
$('#topnav').removeClass('black');
$('#topnav').addClass('transparent').fadeIn(1000);
}
}
});
});

为什么这不起作用？

Answer 1

你可以简单地用CSS设置背景颜色，使用CSS过渡来实现淡入/淡出效果。

.box {
background-color: black;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}

在Javascript中，您可以设置颜色：

if ($(this).scrollTop() > 200) {
$("#topnav").css({"background-color", "yellow"});
}

斯菲德尔

Answer 2

试试这个简单的例子

在您的 CSS 文件中，

.transparent-background {
background-color: transparent;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
.black-background {
background-color: black;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}

在您的 js 文件中，只需添加类，然后将透明背景类附加到 topNav 容器

$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
$("#topnav").removeClass("transparent-background").addClass('black-
background')      
} else {
$("#topnav").removeClass("black-
background").addClass('transparent-background')
} 
});
});