淡入顯示信息/淡出對JS

Question

鑑於以下標籤：

<h1 id="header_one"><strong>Any Title</strong> any message</h1> 

<p id="paragraph_one">Any cool text.<br></p> 

而下面的JS數組：

 var array_h = ["<strong>Any Title1</strong> any message","<strong>Any Title2</strong> any message"]; 
     var array_p = ["Any cool text1 <br>","Any cool text2 <br>"]; 

我如何可能會改變h1和p的消息根據數組中的每個元素使用淡入/淡出效果？我希望效果會永久重複開始，當它達到陣列的最後一條消息時。

Answer 1

你可以使用一些jQuery的：

<h1 id="header_one"><strong>Any Title</strong> any message</h1> 

    <p id="paragraph_one">Any cool text.<br></p> 

var array_h = ["<strong>Any Title1</strong> any message","<strong>Any Title2</strong> any message"]; 
var array_p = ["Any cool text1 <br>","Any cool text2 <br>"]; 
var curIndex = 0; 
var changeheader = function(){ 
    var header = $('#header_one'); 
    header.fadeOut(function(){ 
    header.html(array_h[curIndex]); 
    header.fadeIn(); 
    curIndex = (curIndex + 1) % array_h.length; 
    setTimeout(changeheader,1000); 
    }); 

} 

var curIndex2 = 0; 
var changep = function(){ 

    var p = $('#paragraph_one'); 
    p.fadeOut(function(){ 
    p.html(array_p[curIndex2]); 
    p.fadeIn(); 
    curIndex2 = (curIndex2 + 1) % array_p.length; 
    setTimeout(changep,1000); 
    }); 

} 
setTimeout(changeheader,1000); 
setTimeout(changep,1000); 

工作示例： http://codepen.io/nilestanner/pen/akAVkr

這使得任何數量的陣列