Изменение источника изображения с помощью jQuery + FadeOut

Question

Я успешно реализовал этот код для переключения между img srcs с помощью jquery, найденного из предыдущего решения .

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Мне было интересно, может ли кто-нибудь помочь мне реализовать эффект fadeOut для перехода между img srcs, я пробовал несколько раз и, похоже, не могу обернуться вокруг jquery , Большое спасибо за вашу помощь!

Answer 1

Оба .fadeOut() и .fadeIn() могут использовать второй параметр для использования в качестве функции после завершения анимации - вы можете использовать это для обновления sr c только после того, как изображение скрыто

После этого вы можете связать .fadeIn() как обычно

$('img').on('click', function() {
  let src = ($(this).attr('src') === 'https://placekitten.com/125/?image=11')
    ? 'https://placekitten.com/125/?image=12'
    : 'https://placekitten.com/125/?image=11';
    
  $(this)
    .fadeOut(1500, () => $(this).attr('src', src))
    .fadeIn(1500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src='https://placekitten.com/125/?image=11'/>

Я немного обменивался вашим кодом для демонстрации / ясности

Answer 2

Вы можете просто использовать функцию hide () перед добавлением эффекта fadeIn () или fadeOut (). Таким образом, Вы получите свой эффект перехода.

$('img').on({
     'click': function() {
        var src = ($(this).attr('src') === 'img1_on.jpg')
           ? 'img2_on.jpg'
           : 'img1_on.jpg';

     $(this).hide();
     $(this).attr("src",src).fadeIn("slow");
    }
 });

Answer 3

Если вы хотите больше перехода между изображениями, чем полного исчезновения, а затем полного перехода, вы можете сделать это, используя свойство background-image css и css переходы:

$(function() {
  var img1 = 'url("https://www.fillmurray.com/200/300")';
  var img2 = 'url("https://www.fillmurray.com/g/200/300")'

  $("#theImage").on('click', function(){
    var src = ($(this).css('background-image') === img1)
        ? img2
        : img1;			
    $(this).css('background-image', src)	
  });
});

#theImage{
	  display: inline-block;
    width: 200px;
    height: 300px;
    background-image: url("https://www.fillmurray.com/200/300");
    -webkit-transition: all 1200ms ease-in;
    -moz-transition: all 1200ms ease-in;
    -ms-transition: all 1200ms ease-in;
    -o-transition: all 1200ms ease-in;
    transition: all 1200ms ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="theImage"></div>