4 回答

TA貢獻(xiàn)1783條經(jīng)驗(yàn) 獲得超4個(gè)贊

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊
如果不用css3的話可以使用setInterval模擬動(dòng)畫實(shí)現(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);
}
添加回答
舉報(bào)