jQuery изменить изображение с эффектом исчезновения - PullRequest
Новая
       19

jQuery изменить изображение с эффектом исчезновения

38 голосов
/ 12 мая 2011

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

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

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

Ответы [ 4 ]

78 голосов
/ 12 мая 2011

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

Edit: , вы можете найти более свежее и лучшее решение в Ответ Сандипа Пала

32 голосов
/ 23 мая 2013

Мне кажется, что вместо использования 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;
});
2 голосов
/ 19 октября 2016

Я воспроизвел данные образцы выше. Он дает странное мерцание, которое, как я обнаружил, ожидает загрузки изображения после восстановления его непрозрачности до 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;
});`
0 голосов
/ 12 мая 2011

Вы не можете добавить то, что уже на 100% альфа:)

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

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

http://jsfiddle.net/uGFMt/

...