JSFiddle - React, Tailwind, and code Playground

InFX slider - investigating fadeout > stop > fadein not ending in opacity 1

by Ben Clayton

HTML

<button class="btnstart">Start</button>

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

CSS

.wrapper {position:absolute;top:100px;height:360px;width:940px;}
img {position:absolute;display:none;}

JavaScript

var curr_index = undefined;
var fade_out_index = undefined;


// ========================================

$('.btnstart').click(function() {
    fadeIn(0)
    setTimeout(function() {
        fadeOut(0);
    }, 7500);
});

// ========================================


function fadeIn(idx) {
    console.log('fading in: ' + idx);
    $('#curr').val("current index: " + curr_index);
    
    var opacity = $('.img' + idx).css('opacity');
    var time = opacity * 5000;
    
    //$('.img' + idx).stop(1);
    //console.log('my stopped opacity is: ' + $('.img' + idx).css('opacity'));
    //$('.img' + idx).css({opacity: $('.img' + idx).css('opacity')});
    
    $('.img' + idx).show().css({opacity:.5});
    
    $('.img' + idx).animate(
        {opacity: 1},
        time,
        //function(animation, progress, remainingMs) {
        //    console.log('my opacity is: ' + $(this).css('opacity'));
        //},
        function() {
            console.log('my opacity is: ' + $(this).css('opacity'));
        }
    );
}
// ========================================

function fadeOut(idx) {
    console.log('fading out: ' + idx);    
    fade_out_index = idx;
    var opacity = $('.img' + idx).css('opacity');
    var time = opacity * 5000;
    $('.img' + idx).stop(1).fadeOut(time);
}