jQuery изменить изображение src с эффектом затухания

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

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

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


image jquery fade
person WebDevDude    schedule 12.05.2011    source источник

Ответы (4)


arrow_upward
84
arrow_downward

Вы должны сначала сделать это 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.

Редактировать: вы можете найти более свежее и лучшее решение в ответе Sandeep Pal

person Sylvain    schedule 12.05.2011
comment
Убедитесь, что вы проверяете @Sandeep Pal на одновременное появление / исчезновение, а не на задержку между ними. Если это то, что вы ищете. - person yougotiger; 28.09.2018

arrow_upward
34
arrow_downward

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

Я использовал приведенный выше код от Sylvain: спасибо ему

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

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});
person Sandeep Pal    schedule 23.05.2013
comment
У меня были проблемы с тем, чтобы заставить работать fadeIn/fadeOut для Firefox. Это решение работает для всех браузеров. Спасибо! - person DIG; 09.04.2015

arrow_upward
2
arrow_downward

Я воспроизвел приведенные выше образцы. Это дает странное мерцание, которое, как я обнаружил, ожидает загрузки изображения после того, как его непрозрачность восстановится до 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;
});`
person Aamir Hussain    schedule 19.10.2016

arrow_upward
0
arrow_downward

Вы не можете затухать то, что уже на 100% альфа :)

Другими словами, вы либо затушевываете его, либо прячете, а затем затухаете.

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

http://jsfiddle.net/uGFMt/

person jackJoe    schedule 12.05.2011