Skip to navigation

Fade in and out an image with javascript only11.12.23

How to Fade Out/In in JavaScript

```javascript
fadeOutAndCallback(e[i],
        function(){
          e[i].src = imgs[0]['src'];
          e[i].srcset = imgs[0]['srcset'];
         fadeIn(e[i]);
        }
);

function fadeOutAndCallback(image, callback){
        var opacity = 1;
        var timer = setInterval(function(){
                if(opacity < 0.1){
                        clearInterval(timer);
			callback(); //this executes the callback function!                                                                                            
		}
                image.style.opacity = opacity;
		opacity -=  0.1;
	}, 50);
}

function fadeIn(element) {
    var op = 0.1;  // initial opacity                                                                                                                                 
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        op += 0.1;
    }, 10);
}

```

https://leewc.com/articles/javascript-fade-in-out-callback/

Reply

Anonymous