JSFiddle - React, Tailwind, and code Playground

by raymondralibi

HTML

<div class="btn">Test Dim</div>

CSS

.btn{
    background-color: white;
}

.dim{
    opacity: 0.5;
    background-color: #D9EDF7;
}

JavaScript

var goDim = function(bg_color){
    $('.dim').animate({'opacity': 1}, 200, function(){
        var $this_dim = $(this);
        setTimeout(function(){
        
            
            $this_dim.animate({'background-color': bg_color}, 800, function(){
                
                $(this).removeClass('dim');
                $(this).attr('style', $(this).attr('style').replace('background-color: ' + $(this).css('background-color') + ';', '').replace('opacity: 1;', ''));
            });
            
            
        }, 200);
       
    });
};

$('.btn').click(function(){
    var bg_color = $(this).css('background-color');
    $(this).addClass('dim');
    goDim(bg_color);
});