Добавьте эффект fadeIn и fadeOut в лайтбокс изображения JQuery

Question

У меня есть лайтбокс jQuery, где пользователь нажимает на две ссылки «следующая» и «предыдущая» для навигации по изображениям.

Как мне исчезнуть в новом изображении?

Вот фрагмент моего кода того, как новое изображение заменяет старое изображение.

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

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

Answer 1

2 предложенных решения:

Солитон 1

FadeOut (с непрозрачностью), изменить изображение, снова появиться.

$('#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, но для этого, я думаю, вы не можете избежать двух объектов изображения одновременно. Я полагаю, что это будет больше работы для вас, чтобы принять ваше слайд-шоу. Но тогда вы можете исчезать и исчезать одновременно.