HTML5画布将背景图像淡入另一个图像并返回

Question

我试图来回淡化背景图像，使其在图像发光时显示。我正在使用的代码淡化图像，但它会导致第一个背景在显示下一个背景图像之前完全淡出。我试图让它淡入淡出而不会让背景在短时间内变为空白。

var currentPlay = 0;
var playImages = [];
playImages[0] = 'images/home/noglow.png';
playImages[1] = 'images/home/glow.png';

function changeImage() {

    currentPlay++;
    if (currentPlay > 1) currentPlay = 0;

    $('#theImageToGlow').fadeOut(500, function () {
        $('#theImageToGlow').css({
            'background-image': "url('" + playImages[currentPlay] + "')"
        });

    });
    $('#theImageToGlow').fadeIn(500);
    setTimeout(changeImage, 500);
}

<canvas id="theImageToGlow" ></canvas>

Answer 1

fadeOut（）将始终淡入0不透明度。您应该使用.fadeTo（），并将适当的目标opactiy设置为参数。