javascript - 淡入淡出更改 html 文本的最佳/正确方法？

Question

我正在创建一个用于练习的示例网站，并且我创建了一个函数，该函数每 x 秒更改一次网站的主要背景图像。随着对背景图像的更改，我想更改与每个图像对应的标题文本。我可以很好地淡出背景图像，但文本无法淡出。

我假设它是因为我没有更改 css，而是因为我直接更改了 html 文本，所以转换不起作用。

这是我的功能:

function updateImage() {
    if (pic == 1) {
        caption = "GO BEYOND EARTH";
    }
    else if (pic == 2) {
        caption = "EXPLORE NEW WORLDS";
    }
    else if (pic == 3) {
        caption = "EXPERIENCE DEEP SPACE";
    }

    $('.pic-titles').text(caption);
    $('.center').css('background-image', 'url(img/space' + pic + '.jpg');
    pic++;

    if (pic > 3) {
        pic = 1;
    }
  }
});

现在文本只是改变了，看起来不太好。我希望它与背景图像的淡入淡出效果相匹配。我尝试同时使用 jQuery fadeIn 和 fadeOut，但结果看起来不太好。

Answer 1

您需要两个东西，动画方法和队列。使用此组合，您将能够淡出第一个动画中的文本，然后立即更改文本。最后淡入新文本。

希望这就是您要找的。如果需要，很乐意解释或提供更好的解决方案。

var pic = 2;

function updateImage() {

  if (pic == 1) {
    caption = "GO BEYOND EARTH";
  } else if (pic == 2) {
    caption = "EXPLORE NEW WORLDS";
  } else if (pic == 3) {
    caption = "EXPERIENCE DEEP SPACE";
  }

//Animate function
  $('.pic-titles').animate({
      opacity: 0
    })
    .queue(function() {
      $(this).text(caption);
      $(this).dequeue();
    })
    .animate({
      opacity: 1
    });
    
    
  //$('.center').css('background-image', 'url(img/space' + pic + '.jpg');
  pic++;

  if (pic > 3) {
    pic = 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="pic-titles">GO BEYOND EARTH</p>
<button onclick="updateImage()">PIC</button>