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

我有一个jQuery的灯箱，用户点击两个链接的“下一个”和“上一个”浏览图像。添加淡入淡出效果图像灯箱JQuery

如何淡入新图像？

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

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

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

来源

2011-10-11 Cecil Theodore

这是我使用的，它工作得非常好，而且非常简单。 http://jonraasch.com/blog/a-simple-jquery-slideshow。当然，你必须调整它来改变点击而不是间隔。 – bricker

是的，这是一个很好的幻灯片，但我创建了自己的画廊，只需要淡入淡出效果。可能是我认为的最简单的代码部分。 –

看看他如何处理幻灯片中的褪色。它会为你工作。他建立了独立的div，然后操纵它们的不透明度和z-索引。 – bricker

2级中提出的解决方案：

孤子1

淡出（不透明度），变化的图像，再次褪色英寸

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

孤子2

正如布里克提到的，你可以用一种方式http://jonraasch.com/blog/a-simple-jquery-slideshow做，但这样做，我认为你不能避免在同一时间有两个图像对象。我想这对你来说更适合你的幻灯片放映。但是，你可以同时淡入淡出。

来源

2011-10-11 10:47:08 lumbric

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

回答

相关问题