Fadein Message

by Hybridx24

HTML

<div class="card-shadow" style="width: 300px;height:500px;border:1px solid grey;position:relative;display:inline-block">
    <button id="invoke">Invoke</button>    
</div>
    
<div class="card-shadow" style="width: 300px;height:500px;border:1px solid grey;position:relative;display:inline-block">
    <button id="invoke">Invoke</button>
</div>

JavaScript

$(document).on('click', '#invoke', function(e) {
    
    $this = $(this);

    var $cardOverlay = $("<div style='transition: background 0.2s linear' class='card-overlay'><span style='color:white;position:relative;top:40%;font-weight:bold'>Success!</span></div>");

    $this.parent('.card-shadow').append($cardOverlay);

    $cardOverlay.height('100%').css({
        'opacity' : 1,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background': 'rgba(0, 0, 0, 0.6)',
        'width': '100%',
        'z-index': 1,
        'border-radius': '6px',
        'text-align': 'center'
    });

    setTimeout(function() {
        $cardOverlay.fadeOut("normal", function(){
            $(this).remove();
        })
    }, 2000)
});