向图像灯箱JQuery添加fadeIn和fadeOut效果 [英] Add fadeIn and fadeOut effect to image lightbox JQuery

问题描述

我有一个jQuery灯箱，用户在其中单击两个链接下一个"和上一个"以浏览图像.

I have a jQuery lightbox where the user clicks on two links 'next' and 'previous' to navigate through images.

如何淡入新图像?

这是我的代码片段，内容是新图像如何替换旧图像.

Here is a snippet of my code of how the new image is replacing the old image.

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

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

推荐答案

2个建议的解决方案:

2 proposed solutions:

孤子1

FadeOut(具有不透明度)，更改图像，然后再次淡入.

FadeOut (with opacity), change image, fade in again.

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

孤岛2

如Bricker所述，您可以使用 http://jonraasch.com /blog/a-simple-jquery-slideshow 可以，但是我认为您不能避免同时拥有两个图像对象.我想为了采用幻灯片显示，这对您来说将是更多的工作.但是然后您可以同时淡入和淡出.

As mentioned by bricker, you can use a way as http://jonraasch.com/blog/a-simple-jquery-slideshow does, but to do so I think you can't avoid having two image objects at the same time. I suppose this would be more work for you in order to adopt your slideshow. But then you could fadein and fadeout at the same time.

这篇关于向图像灯箱JQuery添加fadeIn和fadeOut效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！