jQuery Change Images Attributes - But also fade in element

Question

I've created a colour switcher that provides a preview of a theme.

At the moment it just switches the image source and loads that new image in.

I am wondering if I can incorporate a fadeIn effect to it too?

My current jQuery code is :

// Theme Selection....
    $('.colour-block a').click(function()
    {
    $('.colour-block a').removeClass('selected');

    // Add Class - Selected...
    $(this).addClass('selected');

    // Get The Theme ID...
    var id = $(this).attr('id');

    // Get The Theme Class...
    var chosen = $(this).attr('rel');

    switch(chosen)
    {
        case 'rugged-lilac':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac-phone.png');
            break;
        case 'rugged-olive':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-olive.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-olive-phone.png');
            break;
        case 'rugged-orange':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-orange.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-orange-phone.png');
            break;
        case 'rugged-red':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-red.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-red-phone.png');
            break;
        case 'stylised-blue':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-stylised-blue.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-stylised-blue-phone.png');
            break;
        case 'stylised-pink':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-stylised-pink.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-stylised-pink-phone.png');
            break;
        case 'stylised-red':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-stylised-red.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-stylised-red-phone.png');
            break;
        case 'business-blue':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-business-blue.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-business-blue-phone.png');
            break;
        case 'business-pink':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-business-pink.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-business-pink-phone.png');
            break;
        case 'business-red':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-business-red.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-business-red-phone.png');
            break;
    }

    $('.theme_id').val(id);

});

Thanks

Answer 1

You must wait for the image to be hidden and then change the attribute:

$(".your_img_class").fadeOut("slow", function(){
    $(this).attr("src", src).fadeIn("slow");
})

You can get this effect by adding a callback to the fadeOut method.

Answer 2

$('image_id').attr('src', 'path').fadeOut(0).fadeIn(5000);

Answer 3

You can do it using CSS3 Transition like,

a.selected img {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

You can refer Crossfading images

Answer 4

You can reduce your code like this,

$('.colour-block a').click(function () {
    $('.colour-block a').removeClass('selected');
    $(this).addClass('selected');
    // Get The Theme ID...
    var id = $(this).attr('id');
    // Get The Theme Class...
    var chosen = $(this).attr('rel');
    $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-' + chosen + '.png').hide().fadeIn();
    $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-' + chosen + '-phone.png').hide().fadeIn();
    $('.theme_id').val(id);
});

Answer 5

You can do like this. Just hide() images before switch case and fadeIn after switch case.

$('img.preview-desktop, img.preview-phone').hide();

switch(chosen)
    {
        case 'rugged-lilac':
            $('img.preview-desktop').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac.png');
            $('img.preview-phone').attr('src', '/assets/admin/img/themes/previews/preview-rugged-lilac-phone.png');
            break;
.......
    }

$('img.preview-desktop, img.preview-phone').fadeIn('slow');

Answer 6

You can use like this:

First hide then use fadeIn

$('.your_img_class').attr('src', 'image_path').hide().fadeIn();