Play a sequence of images on rollover, using jquery.

fn.imageSequence

(function($) {
    $.fn.imageSequence = function(options) {
        var params = $.extend({
            interval: 100,
            height: parseInt(this.find("li").css("height")),
            skipFirst: false
        }, options);

        var interval, total, id = 0;
        var current = null;

        this.find("li:nth-child(3n+3)").addClass("last");
        this.find("img").each(function(id) {
            this.onload = function() {
                $(this).css("display", "block");
            };
        });

        function animate() {
            id++;
            id %= total;
            if(params.skipFirst) {
                if(id === 0) {
                    id = 1;
                }
            }
            $(current).find(".images").css("margin-top", -params.height * id);
        }

        $("a").bind("mouseenter", function() {
            current = $(this);
            total = 0;
            current.find("img").each(function(id) {
                if (this.complete) {
                    total++;
                }
            });
            if (total <= 2) {
                return;
            }
            id = 0;
            interval = setInterval(animate, params.interval);
            animate();
        });

        $("a").bind("mouseleave", function() {
            clearInterval(interval);
            id = 0;
            total = 0;
            $(current).find(".images").css("margin-top", -params.height * id);
        });
    };
})(jQuery);