Javascript圖像淡入淡出？

Question

我有一個基本的JavaScript圖像幻燈片，它通過4個圖像循環5秒延遲。

有沒有什麼辦法讓每張圖片都可以淡入，而不是立即出現？也許使用css3過渡效果？

我不想使用任何預先製作的幻燈片插件或任何東西，我試圖讓自己脫離JavaScript。

Here is a codepen link

在此先感謝

Answer 1

在這裏你去：在以前的評論津津樂道。一個jsFiddle，它可以在Jquery中完成你想要的任務。 http://jsfiddle.net/HhpW5/5/ 您明確問到如何的div 我之間做改變，在這個演示只需使用XOR位運算符和連接到前綴：「演示」，導致「demo0」或「demo1的」

toggle^=1; 

其他一切都很自我解釋我的意見。希望這可以幫助。

Answer 2

試試這個： -

See Transition

Play around with transtions

#demo { 
    background: #969696; 
    width: 400px; 
    height:300px; 
    color: white; 
    font-size: 50px; 
    font-family: verdana; 
    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */ 
    -moz-transition: background 300ms ease-in 200ms; 
    -o-transition: background 300ms ease-in 200ms; 
    transition: background 300ms ease-in 200ms; 
}