过渡效果onClick

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>