向javascript定時器添加淡入

在我的html正文中，我使用了一個JavaScript，它每隔5秒用ID「moto」寫入並更改我的div中的一行文本。向javascript定時器添加淡入

var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"]; 
 
    var counter = 0; 
 
    var elem = document.getElementById("moto"); 
 
    ChangeFunction(); 
 
    setInterval(ChangeFunction, 5000); 
 
    
 
    function ChangeFunction() { 
 
     elem.innerHTML = text[counter]; 
 
     counter++; 
 
     if(counter >= text.length) { counter = 0; } 
 
    }

#moto{ 
 
     -webkit-transition: all 1s ease-in-out; 
 
     -moz-transition: all 1s ease-in-out; 
 
     -o-transition: all 1s ease-in-out; 
 
     transition: all 1s ease-in-out; 
 
    }

<div id="moto"></div>

我需要應用一些Java的淡入淡出？我寧願使用CSS ...

來源

2016-11-05 71GA

你將不得不寫淡入和淡出風格的CSS類，然後切換元件上的這些類在間隔.. –

是的，你會需要爲此使用Javascript。如果你只是簡單地改變'innerHTML'就沒有什麼可以淡化的。您首先淡出_oldtext_，然後放入_newtext_，然後淡入。（注意：儘管名稱相似，Javascript與Java無關） – tmslnz

您可以使用jQuery來輕鬆做到這一點，如下

var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"]; 
 
var counter = 0; 
 
var elem = document.getElementById("moto"); 
 
ChangeFunction(); 
 
setInterval(ChangeFunction, 5000); 
 

 
function ChangeFunction() { 
 
    var moto = text[counter++]; 
 
    $(elem).fadeOut('slow', function() { 
 
     $(elem).html(moto); 
 
     $(elem).fadeIn('slow'); 
 
    }); 
 

 
    if(counter >= text.length) { counter = 0; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="moto"></div>

來源

2016-11-05 12:56:10 Aruna

這對我而言並不適用於我的電腦。是否需要先安裝JQuerry才能讓我的電腦使用此代碼？ – 71GA

@ 71GA，你可以像上面提到的那樣鏈接CDN中的jquery。只需將腳本標記放置在'' – Aruna

否則，您可以在本地下載並參考本地版本 – Aruna

你並不需要的JavaScript的。這裏是一個純CSS實現：

@keyframes fade { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    50%, 100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
#moto { 
 
    position: relative; 
 
} 
 
#moto div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    animation: fade 4s 0s infinite alternate-reverse; 
 
} 
 
#moto :nth-child(1) { 
 
    animation-delay: -2s; 
 
} 
 
#moto :nth-child(2) { 
 
    animation-delay: 0s; 
 
} 
 
#moto :nth-child(3) { 
 
    animation-delay: 2s; 
 
} 
 
#moto :nth-child(4) { 
 
    animation-delay: 4s; 
 
}

<div id="moto"> 
 
    <div>TEXT 1</div> 
 
    <div>TEXT 2</div> 
 
    <div>TEXT 3</div> 
 
    <div>TEXT 4</div> 
 
</div>

來源

2016-11-05 13:01:40

這個假設預先退出標記，根據OP不存在（他們正在設置'innerHTML'）。但整齊的伎倆消極的延遲！ – tmslnz

@tmslnz如果沒有預先存在的標記，可以使用JavaScript生成CSS。 –

是的，但是這樣做會有點不合適呢？ – tmslnz

向javascript定時器添加淡入

回答

相關問題