jQuery: animazioni sequenziali alternate

Ho già trattato in passato delle animazioni sequenziali con jQuery. In questa sede vorrei mostrarvi come creare degli effetti alternati sulle animazioni stesse.

Possiamo creare una funzione autoeseguente che verrà invocata come funzione di callback del metodo di jQuery utilizzato per le animazioni. Utilizzando un contatore possiamo sia selezionare l'elemento corrente sia alternare le animazioni.

L'alternanza delle animazioni si ottiene con il solo operatore modulo:

(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);
            }
        })();
    });

})();