Question

我确信我的问题很容易解决。我希望在我的标题变得可见时应用淡入淡出，当它不可见时淡出淡出。所以我不想那么粗暴。我试过$(function() { //caches a jQuery object containing the header element var header = $(".clearHeader"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { header.removeClass('clearHeader').addClass("darkHeader"); } else { header.removeClass("darkHeader").addClass('clearHeader'); } }); });，但这对我没有帮助。我也尝试在CSS中添加过渡但这对我也没有帮助。

使用Javascript：

 header {
  width:100%;
  height: 70px;
  position: fixed;
  z-index:999;
  background-color:#fff;
  box-sizing:border-box;
}
header nav {
    display:inline-block;
    float:right;
    line-height:70px;
    }
header nav a {
    margin-left: 25px;
    font-weight: 700;
    font-size: 18px;
    }
header nav a:hover {
    text-shadow:1px 1px 1px red;
    }
.clearHeader{
    display:none;
    opacity:0;
    width: 100%;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}
.darkHeader {
    display:visible;
    opacity:1;
    z-index:999;
}

CSS：

<style name="RoTheme" parent="Theme.AppCompat.Light.DarkActionBar">

CODE PEN

Answer 1

尝试删除不透明度并显示来自css的可见代码并尝试fadeIn和fadeOut赞：

if (scroll >= 50) {
    header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
    header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}

Answer 2

要解决您的问题，您只需使用jQuery的animate即可。 Here's the syntax and explanation。它可以平滑地动画您想要动画的任何css属性。因此你可以这样做：

CSS：

header {
    opacity:1;
}

（只设置默认值）

JS：

header.animate({opacity: "0"}, 500);

淡出，同样的事情，但不透明度1淡入。你可能想要注释掉你的类的显示部分进行测试，因为它可能会影响它的行为。

在javascript中淡入切换类

2 个答案: