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

你可以这样做。只需在切换案例之前隐藏（）图像，然后在切换案例后隐藏（）。

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

您可以这样使用：

首先隐藏然后使用fadeIn

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

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

您可以参考Crossfading images

Answer 4

您可以像这样减少代码，

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

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

Answer 6

您必须等待隐藏图像，然后更改属性：

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

您可以通过向fadeOut方法添加回调来获得此效果。

jQuery更改图像属性 - 但也淡入元素

6 个答案: