jQuery(document).ready
(
    function($)
    {
        var timeout = null;
        $('.demo-image')
            .mouseenter(function()
            {
                var $width = $('div.demo-image > img').width() + 20;
                if ($width > 970) { $width = 965; }
                var $this = $(this);
                clearTimeout(timeout);
                timeout = setTimeout(function()
                {
                    $this.css('background-color', 'white')
                         .css('position', 'relative')
                         .css('z-index', '1000')
                         .stop(true, true).animate({width: $width}, 'fast');
                }, 200);
            })
            .mouseleave(function()
            {
                var $this = $(this);
                clearTimeout(timeout);
                timeout = setTimeout(function()
                {
                    $this.stop(true, true).animate({width : '100%'}, 'fast');
                }, 250);
            }
        );
    }
);