Add fadeIn and fadeOut effect to image lightbox JQuery

问题

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

How do I fade in the new image?

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

回答1:

2 proposed solutions:

Soliton 1

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);
});

Soliton 2

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.

来源：https://stackoverflow.com/questions/7723727/add-fadein-and-fadeout-effect-to-image-lightbox-jquery