Question

I’m trying to create a fadeIn/Out effect on a site I created (edit: site url deleted)

Everything works great except when you click on one of the colors in the color palette, it replaces the image with no effect.

This is the small script I wrote, which is triggered onclick on one of the colors.

function changeImage(newColor) {

    //var previousImage = $('#image-holder').css("background-image");

    $('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");
};

I tried playing with $('#image-holder').fadeOut(1500) and then $('#image-holder').fadeIn(1500) but it acts funny… it double fades the image.

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')").fadeOut(function(){$(this).fadeIn()});

What I would like to achieve is onclick on a color box, the current background image will fadeout while the new background image will fade in.

I know it’s easier to achieve that if I’d used two <img src="" /> and switch their display/visibility but I unfortunately I can’t alter the HTML that much so I’m looking for a jQuery based solution.

Appreciate the help!

Answer 1

The solution that worked for me:

var image = $('#image-holder');
    image.fadeOut(1000, function () {
        image.css("background", "url('images/design-" + newColor + ".jpg')");
        image.fadeIn(1000);
    });