jQuery更改图像属性--但也会在元素中褪色

Question

我已经创建了一个颜色开关，提供了一个预览的主题。

此时，它只需切换图像源并加载该新映像。

我想知道我是否也能加入一个fadeIn效应？

我当前的jQuery代码是：

// 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);

});

谢谢

Answer 1

你可以这样使用：

先隐藏，然后使用fadeIn

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

Answer 2

你可以这样做。只需在切换情况前隐藏()图像，在切换情况后隐藏fadeIn图像。

$('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 3

你可以用CSS3 Transition来做，

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;
}

您可以参考交叉衰落图像