Slide class

count up slide class

by James Doyle

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

li {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin: 10px 0;
    height: 50px;
    width: 150px;
    background: hsl(0,50%,50%);
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform 0.2s linear;
}

li.move {
    -webkit-transform: translate3d(170px,0,0);
}

JavaScript

$(document).ready(function() {
    var list = $('li');
    var count = 0;
    setInterval(function() {
        if (count < list.length) {
            $(list[count]).addClass('move');
            count++;
        } else {
            $(list).removeClass('move');
        }
    }, 500);
});