为图像灯箱 JQuery 添加淡入和淡出效果

Question

我有一个 jQuery 灯箱，用户可以单击“下一个”和“上一个”两个链接来浏览图像。

如何淡入新图像？

这是我的代码片段，说明新图像如何替换旧图像。

var image = $(item).find('a').attr('href');

$('#lightbox img#image').attr('src', image);

Answer 1

2 个建议的解决方案：

Soliton 1

淡出（带不透明度）、更改图像、再次淡入。

$('#lightbox img#image').animate({ opacity: 0}, 500, function(){
  $('#lightbox img#image').attr('src', image);
  $('#lightbox img#image').animate({ opacity: 1}, 500);
});

Soliton 2

正如bricker提到的，您可以使用http的方式://jonraasch.com/blog/a-simple-jquery-slideshow 确实如此，但这样做我认为你无法避免同时拥有两个图像对象。我想，为了采用你的幻灯片，这对你来说会需要更多的工作。但这样你就可以同时淡入和淡出。