JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="box">
    <div id="line"></div>
</div>

CSS

body { margin: 30px; }

#box { 
    width: 100px; 
    height: 100px; 
    background: #f1f1f1; 
    border: 1px solid #e1e1e1; 
    position: relative; 
    overflow: hidden;
}


#line {
    width: 100px; 
    height: 10px;
    background: #333;
    position: absolute;
    bottom: 0px;
    left: 0px;
    
}

JavaScript

$('#line').css({ left: -100 });

$('#box').on({
    
    mouseenter: function(){
    
        $('#line').stop().animate({
         
            left: 0,
    
        }, 500);
        
    },
    mouseleave: function() {
                         
        if ( $('#line').is(':animated')  ) {
        
            $('#line').stop().animate({ left: -100 }, 500);
            
        }
        else {

            $('#line').stop().animate({
             
                left: 100,
        
            }, 500, function(){
                
                $('#line').css({ left: -100 });
            
            });
             
        }
    }
    
});