javascript - 单击时的过渡效果

Question

我正在尝试向这段代码添加过渡效果。它的作用是，当您点击色板颜色时，产品会从原来的黑色变为另一种颜色。但是，过渡并不轻松，因此这是一个非常艰难的过渡。我应该在哪里添加过渡？

<script>
    function changeImage(imgName) {
        image = document.getElementById('imgDisp');
        image.src = imgName;
    }
</script>
<style type="text/css">
    span { 
        display:inline-block;
    }
    span:hover { 
        cursor: pointer; 
        color: #999999; 
        text-align:left;
    }
</style>
<span onclick="changeImage('{{'pink-small.png' | asset_url}}')"> 
    <img src="{{'swatch-1.png' | asset_url}}">
    Pink
</span>
<span onclick="changeImage('{{'black-small.png' | asset_url}}')"> 
    <img src="{{'swatch-2.png' | asset_url}}">
    Black
</span>
<span onclick="changeImage('{{'brown-small.png' | asset_url}}')"> 
    <img src="{{'swatch-3.png' | asset_url}}">
    Brown
</span>
<img id="imgDisp" src="{{'black-small.png' | asset_url}}">

Answer 1

实现所需效果的最简单方法是将两个图像 div 叠加在一起。将下方的 div 设置为目标图像并淡出顶部的 div。顶部 div 淡出后，将其也切换到目标图像并立即恢复其不透明度。由于您的帖子被标记为 jquery，我将在我的示例中使用它的转换函数(样本代码归功于 TinyGiant)。

function changeImage(url) {
  $img = $('#imgDisp');
  $imgfi = $('#imgDispFadeIn');
  $imgfi.attr('src', url);
  $img.fadeOut(1000, function() {
    $img.attr('src', url)
    $img.fadeIn(0);
  });
}

span {
  display: inline-block;
}
#imgContainer {
  position: relative;
  width: 100px;
  height: 100px;
}
#imgDisp,
#imgDispFadeIn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#imgDisp {
  z-index: 10;
}
.swatch {
  width: 25px;
  height: 25px;
}
.swatch.pink {
  background: pink;
}
.swatch.black {
  background: black;
}
.swatch.brown {
  background: brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
</script>
<span onclick="changeImage('//lorempixel.com/200/200/nature/1')">  
  <div class="swatch pink"></div>
</span>
<span onclick="changeImage('//lorempixel.com/200/200/nature/2')">  
  <div class="swatch black"></div>
</span>
<span onclick="changeImage('//lorempixel.com/200/200/nature/3')"> 
  <div class="swatch brown"></div>
</span>
<div id="imgContainer">
  <img id="imgDisp" src='//lorempixel.com/200/200/nature/1' />
  <img id="imgDispFadeIn" src="" />
</div>