第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

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

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

陪伴而非守候 2019-03-16 19:14:50
<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 加入背景顏色當(dāng)小於四百後則把顏色變?yōu)橥该鞯俏疫@樣寫,當(dāng)小於四百後我的div就整個(gè)消失然後檢查才知道是fadeOut()的問題但我想讓他有fade的效果,那我要怎麼寫才不會(huì)消失?(當(dāng)高度小於四百後。。。)更新.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');  }});我的語(yǔ)法是這樣但是他不會(huì)像我要的那樣運(yùn)行
查看完整描述

4 回答

?
瀟瀟雨雨

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

簡(jiǎn)單的過渡動(dòng)畫效果 
css3 transition 就行了唄

查看完整回答
反對(duì) 回復(fù) 2019-04-01
?
慕娘9325324

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

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


查看完整回答
反對(duì) 回復(fù) 2019-04-01
?
九州編程

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

}


查看完整回答
反對(duì) 回復(fù) 2019-04-01
  • 4 回答
  • 0 關(guān)注
  • 597 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)