javascript - 用javascript制作淡入/淡出图像翻转器

Question

各位，我不久前开始学习 javascript。我有这个图像翻转 block 代码，任何人都可以帮助我如何使过渡更加平滑，例如淡入/淡出？

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

如果您不想自己编写动画编码，请考虑使用 CSS 动画库，例如 Animate.css 。但是，如果您仍然想自己制作，我建议添加一个 JSFiddle，以便我们可以轻松地查看您当前的代码发生了什么。