首頁猿問 setInteval中改變marg...

setInteval中改變margin不起作用

JavaScript

素胚勾勒不出你 2018-10-12 14:13:20

實現(xiàn)簡單的動畫效果，每隔2s，將p內(nèi)的內(nèi)容替換掉讓將p向上消失，時間為2s，一步步測試的時候沒問題，但運行時，沒有任何動畫效果代碼如下復(fù)制運行：

查看完整描述

1 回答

呼如林

TA貢獻1798條經(jīng)驗獲得超3個贊

邏輯有問題啊，在wrap.innerHTML = '<p id="content">'+array[index++]+'</p>';行上打個斷點你就看到了，想實現(xiàn)這個效果你加個css3動畫就行了
再加個定時器也可以，只不過這樣太耗性能

  function animation(){        var array=['111111111111111111','2222222222222222222','33333333333333333'];        var index=0;
        setInterval(function(){            var wrap = document.getElementById('wrap');           
         var content = document.getElementById('content');
            content.style.marginTop = -40+'px';
            setTimeout(function(){
                wrap.innerHTML = '<p id="content">'+array[index++]+'</p>';                if(index == array.length){
                    index = 0;
                }
            },1000)

        },2000);
    }

反對回復(fù) 2018-11-16