淡入显示信息/淡出对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

这使得任何数量的阵列