javascript - 如何通过src为jQuery图像过渡设置动画

我通过替换图像HTML标记中的“ src”来进行图像转换

<img src="background0.jpg" alt="" id="bg">

问题是：如何为过渡设置动画，例如淡化旧图片，然后淡化下一个图片或向右滑动。

JavaScript / jQuery

$(function ($) {
    var images = [
            'background0.jpg',
            'background1.jpg',
            'background2.jpg',
            'background3.jpg'
        ],
        amountOfImages = images.length,
        tempR = 0,
        $bg = $('#bg');

    for (let i = 0; i < amountOfImages; i++) {
        var img = new Image(),src = images[i];
    }

    function fader(){
        let r = Math.floor(Math.random()*amountOfImages);
        $bg.attr('src', images[r]); //TODO: Animate the transition
        tempR = r;
    }
    fader();

    setInterval(fader, 5000);
});

最佳答案

如果使用jquery，则可以执行此操作，以便在当前图像淡出后，调用该函数以交换图像源

 function fader(){
     let r = Math.floor(Math.random()*amountOfImages);
     $('#bg').fadeOut(500, function(){
       $bg.attr('src', images[r]); //TODO: Animate the transition
       $('#bg').fadeIn(500);
     tempR = r;
    })
}

关于javascript - 如何通过src为jQuery图像过渡设置动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39557685/