Javascript jQuery可以更改图像属性，但也可以淡入元素

我已经创建了一个颜色切换器，它提供了一个主题的预览

目前，它只是切换图像源并加载新图像

我想知道我是否也能加入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);

});

谢谢

您可以这样使用：

先隐藏，然后使用fadeIn

---

您可以使用

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

---

你可以这样做。只需在切换框之前隐藏（）图像，在切换框之后隐藏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');

---

您可以这样减少代码

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

---

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

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

---

您可以通过向

fadeOut

方法添加回调来获得这种效果。

太棒了！我一直在寻找减少代码的方法，因为我使用的是一种有点“枯燥”的方法。这会导致问题，因为图像已经可见，但fadeIn效果应该给隐藏的对象。

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

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