JSFiddle - React, Tailwind, and code Playground

by m_gol

HTML

<div id="first">
    <div id="scroll">
        <div id="content">
            <div class="item">item1</div>
            <div class="item">item2</div>
            <div class="item">item3</div>
            <div class="item">item4</div>
        </div>
    </div>
</div>

CSS

#first {
    width:300px;
    height:150px;
    border:1px solid pink;
}
#scroll {
    position:relative;
    width:100%;
    overflow:hidden;
    background-color:blue;
}
#content {
    width:400%;
}
#content .item {
    float:left;
    width:25%;
    height:150px;
}

JavaScript

$("#content").css("marginLeft", "0%");
console.log("Initial margin: " + $("#content").css("marginLeft"));

myAnime(1);

function myAnime(step) {
    // Animate
    $("#content").animate({
        marginLeft: '-=100%'
    }, 400, function () {

        // Correct values: 'step 1: margin-left: -100%' & 'Margin step 1: -300px'
        // Correct values: 'step 2: margin-left: -200%' & 'Margin step 2: -600px'

        console.log("Style step " + step + ": " + $("#content").attr("style"));
        console.log("Margin step " + step + ": " + $("#content").css("marginLeft"));

        if (step == 1) {
            console.assert(
            $("#content").attr("style").indexOf("margin-left: -100%;") > -1 &&
                $("#content").css("marginLeft") === "-300px",
                "ERRORS on step " + step + "!");
            // First step finished, try the second one.
            myAnime(2);
        } else {
            console.assert(
            $("#content").attr("style").indexOf("margin-left: -200%;") > -1 &&
                $("#content").css("marginLeft") === "-600px",
                "ERRORS on step " + step + "!");
        }
    });
}