JSFiddle - React, Tailwind, and code Playground

by pascal08

HTML

<div id="cards" style="width:390px;height:180px; overflow:hidden;">
    <div id="card1" class="card" data-id="1" style="background-color:blue"></div>
    <div id="card2" class="card" data-id="2" style="background-color:red"></div>
    <div id="card3" class="card" data-id="3" style="background-color:green"></div>
    <div id="card4" class="card" data-id="4" style="background-color:black"></div>
    <div id="card5" class="card" data-id="5" style="background-color:yellow"></div>
</div>

CSS

.card {
    height:180px;
    width:130px;
    float:left;
    margin-right:-70px;
}

JavaScript

/*
$(document).ready(function () {
    $(".card").on("mouseenter", function () {
        $(this).finish().animate({
            marginRight: 0
        }, 200);
        $(this).siblings().finish().animate({
            marginRight: -70
        }, 200);
    });
});
*/

$(document).ready(function () {
    var timeoutId;
    $(".card").hover( 
    function () {
        var tis = $(this);
        if (!timeoutId) {
            timeoutId = window.setTimeout(function() {
                timeoutId = null;
                tis.finish().animate({
                    marginRight: 0
                }, 200);
                tis.siblings().finish().animate({
                    marginRight: -70
        }, 200);
           }, 100);
        }
    },
    function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
        }
    });
});