淡入淡出更改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>