JSFiddle - React, Tailwind, and code Playground

by oisinlavery

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="https://raw2.github.com/EightMedia/jquery.hammer.js/master/jquery.hammer.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box{
    background: red;
    margin-bottom: 10px;
    color: #fff;
    padding: 20px;
    font-size: 20px;
}

.fade{
    opacity: 0;
    display:none;
}

JavaScript

$(".box").each(function(count){
    $(this).text(count)
    if(count %2 == 0){
        $(this).css({
            x: 200
        });
    }
    else{
        $(this).css({
            x: -200
        });
    }
})

$()