使用javascript淡入/淡出圖像鰭

Question

so guys，我開始學習JavaScript前一段時間。 我有這個圖像鰭塊代碼，任何人都可以幫助我如何使過渡更流暢，像淡入/淡出？

var d = document, 
    smiles = d.querySelectorAll('#text-5 .home-port-widget img'); 

for (var i = 0; i < smiles.length; i++){ 
    smiles[i].alt = smiles[i].getAttribute('src'); 

    smiles[i].onmouseenter = function(){ 
     var hoverImg = this.getAttribute('src'), 
      target = d.querySelectorAll('#text-5 .home-port-widget img:not([src="'+ hoverImg +'"])'); 
     target[0].src = hoverImg.split('-e')[0]+'_a.jpg'; 
     target[1].src = hoverImg.split('-e')[0]+'_b.jpg'; 
    } 
    smiles[i].onmouseleave = function(){ 
     var hoverImg = this.getAttribute('src'), 
      target = d.querySelectorAll('#text-5 .home-port-widget img:not([src="'+ hoverImg +'"])'); 
     target[0].src = target[0].getAttribute('alt'); 
     target[1].src = target[1].getAttribute('alt');  
    } 
} 

Answer 1

如果你不想處理自己的編碼動畫，如Animate.css考慮使用CSS動畫庫。然而，如果你仍然想自己創建，我會建議添加一個JSFiddle，以便我們可以輕鬆地看看當前代碼發生了什麼。