Question

我搜索过并浏览过很多帖子并看到了很多答案，没试过就试过了。

我使用jquery颜色动画，但后来我必须链接另一个id，以避免使用。

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

只有fadein / fadeout效果才会发生。背景颜色正确切换。

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"});
}

jsfiddle

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

Javascript / jquery，为什么我的fadein / fadeout不起作用？

2 个答案: