jQuery: sequential alternate animations

by Manna

HTML

<p><a href="#">Show</a>
</p>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

li {
    display: inline-block;
    list-style: none;
    margin: 0 25px 25px 0;
    width: 100px;
    height: 100px;
    background: #ccc;
}

JavaScript

(function () {
    var lis = $('li').hide();

    $('a').click(function (e) {
        e.preventDefault();
        var i = 0;
        (function displayImages() {
            i++;
            if (i % 2 == 0) {

                lis.eq(i).fadeIn(200, displayImages);

            } else {

                lis.eq(i).slideDown(200, displayImages);
            }
        })();
    });

})();