淡出更改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，但结果看起来并不太好。