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

我搜查了很多帖子并查看了很多答案，并且没有运气试过它们。Javascript/jquery，为什么我的淡入淡出不起作用？

我得到它与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); 

     } 

    } 
    }); 
});

为什么不能正常工作？

来源

2017-07-19 Vegapunk

[背景颜色的jQuery淡出]（可能的重复https://stackoverflow.com/questions/2652281/jquery-fade- in-background-color） – abhishekkannojia

从接受的答案有：_“纯粹的jQuery没有功能来动画颜色。你必须使用jQueryUI或jQuery颜色插件。“_ – abhishekkannojia

您可以简单地使用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"}); 
}

jsfiddle

来源

2017-07-19 11:13:47 Kokodoko

试试这个简单的例子

在你的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') 
    } 
}); 
});

来源

2017-07-19 12:25:01 kuns

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

回答

相关问题