1

so guys, i'm starting to learn javascript a while ago. i have this image flipper block code, can anyone help me how to make the transition more smooth, like fade in/out?

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');      
    }
}
Pang
  • 9,564
  • 146
  • 81
  • 122
Putra Bhaskara
  • 11
  • 1

1 Answers1

0

If you don't want to deal with coding the animations yourself, consider using a CSS animation library such as Animate.css. However, if you still want to make your own I would suggest adding a JSFiddle so that we can easily take a look at what is happening with your current code.

Matt Butler
  • 476
  • 6
  • 21