Применение перехода к элементу jquery .change

Question

У меня есть несколько переключателей, стилизованных таким образом, что при нажатии между ними изображение меняется с помощью функции .change в Jquery. При переключении между изображениями переход прерывистый, и я хотел бы сгладить его, как свойство ct .transition.

Я уже пробовал применять стили переходов ко всем элементам в CSS, но не повезло, так что это заставляет меня думать, что в JS требуется некоторая настройка?

Я бы хотелхотелось бы иметь возможность стилизовать переход в css, чтобы он выглядел более плавным и плавным, особенно когда изображение меняется с пейзажа на портрет и наоборот. У меня также, вероятно, было бы больше, чем просто два изображения, поэтому оно должно работать универсально для всего этого.

$('input:radio[name="radioName"]').change(function() {
  var $src = "";
  if ($(this).val() == "1") {
    $src = "https://images.unsplash.com/photo-1573188747639-2e58493e8df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80";
  } else {
    $src = "https://images.unsplash.com/photo-1522847560429-ad7381e61f96?ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80"
  }

  $('.slide').attr('src', $src);
});

.slide {
  transition: all 0.5s ease;
  width: 20%;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="slide" alt="slide 1" src="https://images.unsplash.com/photo-1573059225035-dcef0018bcc5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">

<div class="roman-pagination">
  <label class="roman-radio">
    <input type="radio" name="radioName" value="1" checked>
    <span class="numeral">I.</span>
    <span class="title">The First</span>
  </label>
  <label class="roman-radio">
    <input type="radio" name="radioName" value="2">
    <span class="numeral">II.</span>
    <span class="title">The Second</span>
  </label>
</div>

Это фрагмент соответствующего кода (все здесь: https://codepen.io/albicant__/pen/OJJEpqq)

Answer 1

Для перекрестного затухания вам понадобятся оба изображения (текущий, следующий) в DOM одновременно. Лучше всего будет выглядеть, если вы сохраните текущее изображение с полной непрозрачностью во время кросс-фейдинга, а затем после перехода установите его на непрозрачность 0. Пусть ваш слой JS будет «следующим» img поверх «текущего» img (z-index или другого). ). Тогда ваш переходный класс будет красиво отображаться - но ключом является наличие обоих изображений, а не только изменение src одного элемента img.