javascript - 在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

这允许数组中包含任意数量的元素