jQuery изменяет атрибуты изображений - но и исчезает в элементе

Я создал переключатель цветов, который обеспечивает предварительный просмотр темы.



В данный момент он просто переключает Источник изображения и загружает это новое изображение.



Мне интересно, могу ли я включить в него эффект фадеина?



Мой текущий код 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);



});


Спасибо

440   6  

6 ответов:

Можно использовать так:

Сначала спрячьте, а затем используйте фадеин 

$('.your_img_class').attr('src', 'image_path').hide().fadeIn();
1  
2014-06-18 13:31:18

Вы можете сделать вот так. Просто скрыть() изображения до переключателя и 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');
2  
2014-06-18 13:34:02

Вы можете сократить свой код следующим образом, 

$('.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);
});
1  
2014-06-18 13:35:39

Вы можете сделать это с помощью 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;
}

Вы можете ссылаться на перекрестные изображения

1  
2014-06-18 13:41:30 
$('image_id').attr('src', 'path').fadeOut(0).fadeIn(5000);
1  
2014-06-18 14:34:10

Вы должны дождаться, пока изображение будет скрыто, а затем изменить атрибут: 

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

Вы можете получить этот эффект, добавив обратный вызов к методу fadeOut.

0  
2015-09-08 14:12:48

Comments

    Ничего не найдено.
Click here to cancel reply.