Плавная смена источника фото на jQuery

153

08 декабря 2021, 07:40

Есть примерно следующий код, реализующий смену картинки при наведении на определенный блок. При этом картинка меняется резко. Можно ли как-то сделать эту смену плавной?

function change_src(){ 
    let i = 1; 
 
    $("#change").mouseleave(function() { 
      i++; 
      $('#pic').attr('src', 'https://picsum.photos/id/' + i + '/200/300'); 
    }) 
} 
 
change_src();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="change"> 
  <img src="https://picsum.photos/id/1/200/300" alt="" id="pic"> 
</div>

Answer 1

Это очень неправильный подход, так не получиться. При наведении вы говорите что б у Вас вместо одного src адреса подставился другой. Если картинка будет большого размера или её вообще по какой-то причине не будет, вы ничего не увидите. Правильнее будет держать сразу все необходимые картинки, и по наведению курсора,допустим опускать opacity выше лежащей картинки к 0 (этот эффект можно контролировать)

Answer 2

let i = 1; 
 
$("#change").mouseleave(function() { 
  $('#pic-' + i).fadeOut(300, function(){  
      $(this).remove(); 
  }); 
  i++; 
  $('#change').prepend('<img src="https://picsum.photos/id/' + i + '/200/300" alt="" id="pic-' + i + '" class="slide">'); 
})

.slide{position:absolute}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="change"> 
  <img src="https://picsum.photos/id/1/200/300" alt="" id="pic-1" class="slide"> 
</div>