javascript - 如何让两个元素在无限循环中出现和消失

Question

我试图让标题一消失，然后标题二出现并消失，标题一出现在一个循环中。我的代码的问题是，标题 2 仅出现很短的时间，并且在标题 1 出现之前至少 2-3 秒出现空白屏幕。

JS:

var h1 = $('.header_one');
var h2 = $('.header_two');

setInterval(function(){
    h1.fadeOut(1000);
    h2.fadeIn(1000);
    h2.fadeOut(2000, function() { h1.fadeIn(); });
}, 4000);

HTML:

<h1 class="header_one"> HEADER ONE </h1>
<h2 class="header_two"> HEADER TWO </h2>

CSS:

h1, h2 {
    z-index: 10;
    position: relative;
}     

h2 {display: none;}

还有一个问题:当header 2消失时，我在h1和h2下面的两个链接，设置为position: relative;移动到页面顶部。

Answer 1

这是一种方法:jsfiddle

$("#box1").hide();


function animate() {
  $("#box2").fadeOut(1000, function() {
    $("#box1").fadeIn(1000, function() {
      $("#box1").fadeOut(1000, function() {
        $("#box2").fadeIn(1000, animate);
      });
    });
  });
}

animate();

div {
  position: absolute;
  left: 20px;
  top: 20px;
  background: red;
  width: 50px;
  height: 50px;
}

div:nth-child(2) {
  left: 30px;
  top: 30px;
  background: blue;
}

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