如何在 Backstretch 中淡入字幕

Question

The following script (with the help of Stackoverflow members) now works perfectly to display random images with captions. However, In addition to the images fading in, how do you fade-in the captions as well?

// Preload
$(images).each(function(){
$("<img/>")[0].src = this.url;});

var images = new Array(); //array of imgs objects

images[0] = {url: "/images/backgrounds/l&h.jpg", caption: "Stan Laurel and Oliver Hardy"};
images[1] = {url: "/images/backgrounds/sherlock-watson.jpg", caption: "Basil Rathbone and Nigel Bruce"};
images[2] = {url: "/images/backgrounds/powell-loy.jpg", caption: "William Powell and Myrna Loy"};
images[3] = {url: "/images/backgrounds/conried-bergman-bogart.jpg", caption: "Paul Heinreid, Ingrid Bergman and Humphrey Bogart"};

function loadRandomImage(imgs) {
    var index = Math.floor(Math.random() * imgs.length);

    console.log("loadRandomImages(): index = "+ index);

    $.backstretch(imgs[index].url, {fade: 1500, speed: 5000}); 

    $("#caption").html(imgs[index].caption);
}


// we run the function once at the beginning.
loadRandomImage(images);

// Change images every 5 seconds
setInterval(loadRandomImage, 5000, images);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<div id="caption"></div>

Answer 1

I think you could just add a css transitiont ex: #caption { transition: opacity 3s linear 0s } to the css or add it in with vanilla js:

document.getElementById('caption').style.transition = 'opacity 3s linear 0s'

i dont know jQuery well but i'm sure theres a way