使用javascript淡入/淡出图像鳍

so guys，我开始学习JavaScript前一段时间。我有这个图像鳍块代码，任何人都可以帮助我如何使过渡更流畅，像淡入/淡出？使用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');  
    } 
}

来源

2015-11-06 Putra Bhaskara

如果你不想处理自己的编码动画，如Animate.css考虑使用CSS动画库。然而，如果你仍然想自己创建，我会建议添加一个JSFiddle，以便我们可以轻松地看看当前代码发生了什么。

来源

2015-11-06 03:58:12

感谢您的建议，将尝试在我的下一个项目。 –

这个，我发现我可以使用setTimeout添加一个简单的延迟。傻了，问问题太快了 –

使用javascript淡入/淡出图像鳍

回答

相关问题