CODEWITHSUNDEEP
jqueryimagebackgroundfade
SeanStick
SeanStick

Reputation: 99

HTML5 canvas fade background image to another image and back

I am trying to fade an background image back and forth to make it appear as the images is glowing. The code i am using fades the image but it causes the first background to fade completely out before it shows the next background image one I am trying to make it fade in and out without having the background be blank for the short moment.

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>

Upvotes: 0

Views: 3085

Answers (1)

devnull69
devnull69

Reputation: 16544

fadeOut() will always fade to 0 opacity. You should use .fadeTo() instead and set an appropriate destination opactiy as a parameter to it.

Upvotes: 1

Related Questions