JQuery Изменить изображение src с эффектом Fade

Я пытаюсь создать эффект, когда вы нажимаете на уменьшенное изображение, а ссылка на эскиз заменяет основное изображение, но исчезает. Это код, который я сейчас использую:

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery").fadeIn(400, function() {
        $(".boat_listing .mainGallery").attr('src',$imgURL);
    });
});

Это работает и заменяет изображение без эффекта затухания. Что мне нужно изменить, чтобы заставить fadeIn работать?

Ответы

Ответ 1

Сначала вы должны сделать это fadeOut() или скрыть его.

Попробуйте следующее:

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery")
        .fadeOut(400, function() {
            $(".boat_listing .mainGallery").attr('src',$imgURL);
        })
        .fadeIn(400);
});

Это должно быть fadeOut изображение, затем смените src, когда оно будет скрыто, а затем fadeIn.

Вот пример jsFiddle.

Ответ 2

Я вместо использования FadeIn и fadeOut лучше использовать функциональность fadeTo как fadeIn и fadeOut создали промежуток времени между ними за несколько микросекунд.

Я использовал выше код из Сильвена: благодаря ему

$("#link").click(function() {

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});

Ответ 3

Вы не можете угасать то, что уже на 100% alpha:)

Другими словами, вы либо исчезаете, либо скрываете его, а затем исчезаете.

Я сделал этот пример, в основном, я скрываю его, а затем исчезаю:

http://jsfiddle.net/uGFMt/

Ответ 4

Я воспроизвел приведенные выше образцы. Это дает странное мерцание, и я обнаружил, что он ждет загрузки изображения после того, как его непрозрачность будет восстановлена до 1. Я изменил код с помощью Sandeep.

$("#link").click(function() {

$("#image").fadeTo(1000,0.30, function() {
  $("#image").attr("src",$("#link").attr("href"));
  $("#image").on('load', function(){
    $("#image").fadeTo(500,1);
  });
 });
 return false;
});`