過渡效果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>