过渡效果点击

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，我将在我的例子中使用它的过渡函数(Credit to TinyGiant for swatch代码)。

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>