JSFiddle - React, Tailwind, and code Playground

InFX slider - fadein and fadeout with time corrections.

by Ben Clayton

HTML

<button class="btn1">Fade up 1</button>
<button class="btn2">Stop and fade down 1</button>


<div class="wrapper">
    <img class="img1" src="http://www.infxsolutions.com/dyn/_mainads/global-comms.jpg" />
    <img class="img2" src="http://www.infxsolutions.com/dyn/_mainads/abstract-city.jpg" />
    <img class="img3" src="http://www.infxsolutions.com/dyn/_mainads/atomic-splits.jpg" />
    <img class="img4" src="http://www.infxsolutions.com/dyn/_mainads/bright-lights.jpg" />
</div>

CSS

.wrapper {position:absolute;top:100px;}
img {position:absolute;display:none;}

JavaScript

var curr_index = 0;
var next_index = 0;
var curr_animation_remaining = 0;


$('.btn1').click(function() {
    next_index = 1;
    $('.img1').fadeIn({
        duration: 5000,
        progress: function(animation, progress, remainingMs) {
            console.log(animation);
            console.log(progress);
            console.log(remainingMs);
            curr_animation_remaining = remainingMs;
        },
        complete: function() {
            // complete
        }
    });
});


$('.btn2').click(function() {
    $('.img1').stop().fadeOut(5000-curr_animation_remaining, function() {
    
    })
});


function next() {
    curr_index = next_index;
    
    
};