Как сделать анимацию при смене src у image?

Question

[tvsjke]

По ховеру на картинку меняется её изображение.

$('.product-listing .four-cont').hover(function() {
        var $img = $(this).find('.image img'),
            cacheImg = $img.attr('src');

        if($img.data('additionalImage') !== undefined) {
            $img.attr('src', $img.data('additionalImage'));
            $img.data('additionalImage', cacheImg);
        }
    }
);

Но при этом изображение меняется резко, мгновенно. Как навесить на изменение src что-то типа fadeIn('slow') ? Спасибо.

Answer 1

[Pavel]

$('.product-listing .four-cont').hover(function() {
    var $img = $(this).find('.image img'),
    cacheImg = $img.attr('src');

    if($img.data('additionalImage')) {        
        $img.fadeOut(500, function() {
            $img.attr('src', $img.data('additionalImage'));
            $img.data('additionalImage', cacheImg);
            $img.fadeIn(500);
        });       
    }
});

Answer 2

[Alex XYZ]

Анимация перехода одного изображения в другое делается только на двух загруженных изображениях. В этом суть перехода fade. Вам обязательно нужно загруженное второе изображение.

Answer 3

[Александр]

Можно осуществить через background-image и transition.
Как то так: codepen.io/anon/pen/WREOZO
UPD: Сделал смену по клику, но разобраться просто)