如何在javascript中點擊時添加淡入淡出效果？

Question

如何在圖片發生變化時添加淡入或淡出效果，當您點擊下一張圖片時？我在這裏使用畫布。我沒有使用自動幻燈片，也沒有使用超時。基本上，它在圖像轉換過程中增加了效果。

function nextimg() { 

i++; 
if(i > 0 && i < 6) { 
    image.src = 'images/' + i + '.jpg'; 
} 

if(msg1 == i) { 
    msg = "Fallout 4"; 
    document.getElementById("caption").innerHTML = msg; 
} 
else if(msg2 == i) { 
    msg = "Diamond City"; 
    document.getElementById("caption").innerHTML = msg; 
} 
else if(msg3 == i) { 
    msg = "Commonwealth"; 
    document.getElementById("caption").innerHTML = msg; 
} 
else if(msg4 == i) { 
    msg = "Glowing Sea"; 
    document.getElementById("caption").innerHTML = msg; 
} 
else if(msg5 == i) { 
    msg = "Cambridge"; 
    document.getElementById("caption").innerHTML = msg; 
} 

var canvas = document.getElementById("img_1").className += "fadeOutEffect"; 

var canvas = document.getElementById("img_1"); 
var context = canvas.getContext("2d"); 
    context.drawImage(image, 0,0, 500, 400); 
} 

==================================

#prevpic { 
    opacity:1; 
    transition: opacity 1s; 
} 

#nextpic.fadeOutEffect { 
    opacity:0; 
} 

== ===============================

<h2 id="caption"></h2> 
     <canvas id="img_1" width="500" height="400"> 
      <--!input type="submit" onclick="canvas(); return false;"!--> 
     </canvas><br><br> 
     <input type="submit" id="prevpic" value="Previous" onclick="previmg()"> 
     <input type="submit" id="nextpic" value="Next" onclick="nextimg()"> 

Answer 1

你可以試試這個：

function nextimg() { 
    i++; 
    if(i > 0 && i < 6) { 
     image.src = 'images/' + i + '.jpg'; 
    } 

    if(msg1 == i) { 
     msg = "Fallout 4"; 
     document.getElementById("caption").innerHTML = msg; 
    } 
    else if(msg2 == i) { 
     msg = "Diamond City"; 
     document.getElementById("caption").innerHTML = msg; 
    } 
    else if(msg3 == i) { 
     msg = "Commonwealth"; 
     document.getElementById("caption").innerHTML = msg; 
    } 
    else if(msg4 == i) { 
     msg = "Glowing Sea"; 
     document.getElementById("caption").innerHTML = msg; 
    } 
    else if(msg5 == i) { 
     msg = "Cambridge"; 
     document.getElementById("caption").innerHTML = msg; 
    } 

    var canvas = document.getElementById("img_1"); 
    canvas.className += " fadeOutEffect"; // Add an space so do not concats existent classes 
    canvas.addEventListener("transitionend", function transitionend() { 
     canvas.removeEventListener("transitionend", transitionend, false); 
     clearTimeout(tim); 
     canvas.className = canvas.className.replace(" fadeOutEffect", ""); 
    }, false); 
    var tim = setTimeout(transitionend, 1100); // To overcome old browsers 
    var context = canvas.getContext("2d"); 
    context.drawImage(image, 0,0, 500, 400); 
} 

有什麼是聽取transitionend事件並在事件結束時刪除該類。畫布將轉換回opacity: 1。它也會在超時時間內完成，因此可以保持瀏覽器仍然不支持transitionend事件。順便說一句，他們是舊的瀏覽器幾乎沒有使用時下（IE9等）：http://caniuse.com/#search=transitionend你可以刪除它，如果你想。

Protip：保持您的縮進清潔。

Protip 2：要向元素添加文本，請使用textContent而不是innerHTML。速度更快，並且允許特殊字符而無需任何預轉換，如普通的<和>。