Question

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

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()

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

2 个答案: