JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<ul id="nav">
    <li><span></span></li>
</ul>

CSS

#nav {
    width:350px; 
}
#nav span {
    padding:0 0 0 20px;   
}

#nav li {
    position:relative;
    background-color:#0f0;
    font:normal 11px verdana;
    text-align:right;
    padding:2px 12px 2px 0px;
    margin:2px 0;
    overflow:hidden;
    width:0px;
    height:13px;
}

#nav li:hover {
    cursor:pointer;
    background-color:#f00;
    color:#fff; 
}

JavaScript

$("#nav li").hover(

function() {
    $this = $(this);
    $this.stop(true, false).animate({
        width: '+100%'
    }, 100);
}, function() {
    $startTime = new Date().getTime();
    $this = $(this);
    $this.stop(true, false).animate({
        width: '0'
    }, {
        duration:7200000,
        step: function(now, fx) {
            $currentTime = new Date().getTime();
            $timeLeft = 7200000 + $startTime - $currentTime;
            $hour =  parseInt($timeLeft / 3600000);
            $minute = parseInt(($timeLeft - $hour * 3600000) / 60000);
            $second = parseInt(($timeLeft - $hour * 3600000 - $minute * 60000) / 1000);
            var data = $hour + 'hrs ' + $minute + 'min ' + $second + 'sec left';
            $("span", $this).html(data);
        }
    });
});