Как добавить эффект fadein к новым изображениям?

Question

Как добавить плавный эффект fadeIn к новым изображениям?

var switchImage = function(newImageSrc, newImage, mainImageDomEl) { 
    jQuery(mainImageDomEl).attr('src', newImageSrc); 
    $(mainImageDomEl).parents('a').attr('href', newImageSrc); 
}; 

Answer 1

Вы можете просто использовать JQuery fadeIn и fadeOut функции, смотрите пример ниже.

var switchImage = function(newImageSrc, newImage, mainImageDomEl) { 
 
    $(mainImageDomEl).fadeOut(200, function() { 
 
     $(mainImageDomEl).attr('src', newImageSrc); 
 
     $(mainImageDomEl).fadeIn(200); 
 
    }); 
 
}; 
 

 
var images = [ 
 
    'http://cdn.morguefile.com/imageData/public/files/n/Natureworks/03/l/139404735343e9t.jpg', 
 
    'http://cdn.morguefile.com/imageData/public/files/p/pippalou/04/l/1398366305gv9cc.jpg' 
 
]; 
 

 
var i=0; 
 
setInterval(function() { 
 
    var parent = $('div'); 
 
    switchImage(images[i], null, $('img')); 
 
    i = (i+1)%images.length; 
 
}, 2000);

img { 
 
    width: 200px; 
 
    border-radius: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="http://cdn.morguefile.com/imageData/public/files/p/pippalou/04/l/1398366305gv9cc.jpg" /> 
 
</div>

Answer 2

В JQuery вы можете использовать функцию fadeIn() или fadeOut(). Обратитесь к этому дополнительно. fadeIn()