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