Question

我设计了几个单选按钮，以便在它们之间单击时使用Jquery中的.change函数更改图像。当在图像之间切换时，过渡是生涩的，我想将其平滑化，类似于css .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中的两个图像（当前，下一个）。如果在交叉淡入淡出期间将当前img保持为完全不透明，然后在过渡后将其设置为不透明度0，则效果最佳。将JS层的“ next” img置于“当前” img（z索引或其他）上方）。然后，您的过渡类将呈现精美的效果-但关键是在此同时包含两个图像，而不仅仅是更改单个img元素的src。

将过渡应用于jquery .change元素

1 个答案: