如何在无限循环中使两个元素交替出现和消失

Question

我希望让标题一消失，然后标题二出现并消失，然后标题一再次出现，如此循环。但是我的代码问题在于标题二只会出现很短的时间，之后屏幕就会空白至少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;}

还有一个问题：当标题二消失时，我的两个链接（位于h1和h2下方）设置为position: relative; 会移动到页面顶部。

- Shinrin Yoku

---

我相信在jQuery中使用animate会更好，针对这种类型的事情。 - Álvaro Touzón

为什么，如果你不介意解释一下，阿尔瓦罗？ - Shinrin Yoku

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>

- akinuri

Answer 2

你的链接在标题消失时上移的原因是因为 fadeIn 和 fadeOut 操纵了 display 属性，将其从文档流中移除。只有 visibility 属性会保留元素的位置并为其保留空间。

假设你的两个标题在样式上看起来相同，为什么不只使用一个标题，在动画过程中更改其中的文本颜色/透明度呢？

但是，如果你真的想按顺序触发它们，根据你的代码，你需要像最后一行所做的那样，其中一个是回调函数，当另一个完成时才会执行；然而，这不会解决你的链接上移问题。

这是一种非常糟糕/不好的方法，但它可以工作...

setInterval(function(){
    $('h1').fadeOut(function(){
        $('h2').fadeIn();
    });
}, 4000);

setInterval(function(){
    $('h2').fadeOut(function(){
        $('h1').fadeIn();
    });
}, 8000);

- Waxi

Answer 3

这是我使用jQuery做循环的选择 动画：

https://jsfiddle.net/vbw8jLko/

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

function loop(){
console.log('llop');
    $( ".header_one" ).stop().css('opacity', 0).show().animate({opacity:1}, 700).delay(700).animate({
    opacity: 0
  }, 1000, function(){
  $(this).hide();
  $( ".header_two" ).stop().css('opacity', 0).show().delay(100).animate({
    opacity: 1
  }, 1000).delay(700).animate({opacity:0}, 1000, function(){
  $(this).hide(); loop()});
  });

}

loop();

希望您喜欢它 :)

- Álvaro Touzón