監聽 scrollTop 超過一定高度則做動作，但是else後該div區塊消失不見

Question

<div class="header_container_for_full_cover">
 
</div>

$(window).scroll(function() {
  if ( $(this).scrollTop() > 400){
    $('.header_container_for_full_cover').fadeIn().css('background-color', 'rgba(0,0,0,.7)');
  } else {
    $('.header_container_for_full_cover').fadeOut().css('background-color', 'transparent');
  }
});

好怪
我想在 header_container_for_full_cover 加入背景顏色
當小於四百後則把顏色變為透明
但是我這樣寫，當小於四百後我的div就整個消失
然後檢查才知道是fadeOut()的問題
但我想讓他有fade的效果，那我要怎麼寫才不會消失？（當高度小於四百後。。。）

---

更新

.background-off {
  animation: backgroundOff;
  -webkit-animation: backgroundOff;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes backgroundOff {
  from {
    background: rgba(0,0,0,0.8);
  }

  to {
    background: transparent;
  }
}

$(window).scroll(function(){
  if($(this).scrollTop() > 350){
    $('.header_container_for_full_cover').addClass('background-off');
  }else{
    $('.header_container_for_full_cover').removeClass('background-off');
  }
});

我的語法是這樣
但是他不會像我要的那樣運行

Answer 1

执行顺序应该调整下 先改变背景色再执行淡出动画
你现在这个是先执行淡出再执行修改背景色
修改为：
$('.header_container_for_full_cover').css('background-color', 'transparent').fadeOut();

---

保留Div 修改为
css 添加
.background-off {

animation: backgroundOff  0.5s forwards;
-webkit-animation: backgroundOff 0.5s forwards;

}

@keyframes backgroundOff {

from {background: rgba(0,0,0,.8);}
to {background: transparent;}

}
js添加

$(selector).addClass("background-off");

---

css再添加淡入背景动画

.background-on {
    animation: backgroundOn  0.5s forwards;
    -webkit-animation: backgroundOn 0.5s forwards;
}
        
@keyframes backgroundOn {
    from {background: transparent;}
    to {background: rgba(0,0,0,.8);}
}

js写法为

if($(this).scrollTop() > 350){
   $('.header_container_for_full_cover').removeClass('background-off');
   $('.header_container_for_full_cover').addClass('background-on');
}else{
   $('.header_container_for_full_cover').removeClass('background-on');
   $('.header_container_for_full_cover').addClass('background-off');
}

Answer 2

简单的过渡动画效果
css3 transition 就行了呗

Answer 3

transition最好实现 如果要用jquery方法 可以使用 jquery的animate() 方法，详细指定你要变化的属性，

Answer 4

如果不用css3的话可以使用setInterval模拟动画实现：

function changeBackOpacity(showOrHide){
    let [n,per,limit] = [];
    if(showOrHide === "show"){
        [n,per,limit] = [0,3,102];
    }else{
        [n,per,limit] = [99,-3,-3];
    }
    let t = setInterval(() => {
        if(n<10){
            $(".backgroundTest").css("background",`rgba(0, 0, 0, 0.0${n})`);
        }else{
            $(".backgroundTest").css("background",`rgba(0, 0, 0, 0.${n})`);
        }
        n = n + per;
        // console.log(n)
        if(n == limit){
            clearInterval(t);
        }
    },50)
}

let timer = null,
    isHidden = false;
window.onscroll = (event) => {
    if(timer){
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(() => {
        let realHeight = document.documentElement.scrollTop || document.body.scrollTop;
        if(realHeight > 100 && !isHidden) {
            changeBackOpacity("hide");
            isHidden = true;
        }else if(realHeight <= 100 && isHidden){
            changeBackOpacity("show");
            isHidden = false;
        }
    },300);
}