監(jiān)聽 scrollTop 超過一定高度則做動作，但是else後該div區(qū)塊消失不見

<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 加入背景顏色
當小於四百後則把顏色變?yōu)橥该?br>但是我這樣寫，當小於四百後我的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');
  }
});

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

回答

編輯回答

心上人

transition最好實現(xiàn) 如果要用jquery方法可以使用 jquery的animate() 方法，詳細指定你要變化的屬性，

2017年10月4日 01:28

編輯回答

情皺

如果不用css3的話可以使用setInterval模擬動畫實現(xiàn)：

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

2017年10月25日 12:25

編輯回答

安于心

執(zhí)行順序應(yīng)該調(diào)整下先改變背景色再執(zhí)行淡出動畫
你現(xiàn)在這個是先執(zhí)行淡出再執(zhí)行修改背景色
修改為：
$('.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');
}

2018年9月17日 13:15

編輯回答

淺時光

簡單的過渡動畫效果
css3 transition 就行了唄

2017年5月9日 12:40