如何为新图像添加淡入淡出效果？

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() 。 参阅更多。 淡入（）