Expand and collapse a container vertically on mouseover and mouseout. usage: $.iris($iconCtnr, 40, $iconCtnr.height(), '.selected');

iris.jquery.js

$.iris = function (container, minHeight, maxHeight, keepInSightSelector, callback) {
    var self            = this;
    var timeout         = null;
    var $container      = $(container);

    function handleKeepInSight () {
        if (!keepInSightSelector) {
            return;
        }

        $container.find(keepInSightSelector).get(0).scrollIntoView(false);
    }

    function startAnimation(direction) {
        var targetHeight    = direction <= 0 ? minHeight : maxHeight;

        $container.stop().animate({
            height      : targetHeight
        }, {
            step        : handleKeepInSight,
            complete    : callback
        })
    }

    function delayMethodCall(callback, wait) {
        if (typeof callback !== 'function') {
            return;
        }

        wait = Math.abs(wait) || 10;

        if (timeout !== null) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(function () {
            timeout = null;
            callback();
        }, 100);
    }

    $container.bind('mouseover', function (event) {
        delayMethodCall(function () {
            startAnimation(1);
        }, 100);
    }).bind('mouseout', function (event) {
        delayMethodCall(function () {
            startAnimation(-1);
        }, 200);
    });

    startAnimation(-1);
};