Анимированное меню с помощью jQuery

<div id="ac_background" class="ac_background">
    <img class="ac_bgimage" src="/images/Default.jpg" alt="Фон"/>
    <div class="ac_overlay"></div>
    <div class="ac_loading"></div>
</div>

<div id="ac_content" class="ac_content">
    <h1><span>Cafe + Bar</span>Dhalia</h1>
    <div class="ac_menu">
        <ul>
            <li>
                <a href="/images/Appetizers.jpg">Appetizers</a>
                <div class="ac_subitem">
                    <span class="ac_close"></span>
                    <h2>Appetizers</h2>
                    <ul>
                        <li>
                            A wonderful serenity has taken possession
                            of my entire soul, like these sweet mornings
                            of spring which I enjoy with my whole heart.
                        </li>
                        <li>Lobster Bisque</li>
                        <li>Smoked Salmon Terrine</li>
                        <li>Tuna Ceviche</li>
                        <li>Wild Mushroom Flan</li>
                        <li>Almond Bruschetta</li>
                        <li>Green Chilli Canapee</li>
                        <li>Artichoke Rucula Salad</li>
                    </ul>
                </div><!-- ac_subitem-->
            </li>
            ...
        </ul>
    </div><!-- ac_menu -->
</div><!-- ac_content -->

@import url('reset.css');

body{
    background:#000;
    color:#fff;
    font-family: 'PT Sans Narrow', Arial, sans-serif;
    text-transform:uppercase;
}

a{
    color:#fff;
    text-decoration:none;
}

img.ac_bgimage{
    position:fixed;
    left:0px;
    top:0px;
    opacity:0.8;
    display:none;
}

.ac_overlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:transparent url(../images/pattern.png) repeat top left;
}

.ac_loading{
    position:fixed;
    top:10px;
    right:10px;
    background:#000 url(../images/loader.gif) no-repeat center center;
    width:50px;
    height:50px;
    border-radius:10px 10px 10px 10px;
    z-index:999;
    opacity:0.7;
    display:none;
}

.ac_content{
    position:fixed;
    height:90px;
    width:100%;
    top:50%;
    left:0px;
    margin-top:-65px;
}

.ac_content h1{
    background:transparent url(../images/bg_menu.png) repeat top left;
    display:block;
    float:left;
    width:90px;
    height:50px;
    padding:20px;
    font-size:36px;
    font-weight:bold;
    line-height:20px;
    margin-right:1px;
}
.ac_content h1 span{
    display:block;
    font-weight:normal;
    font-size:14px;
}

.ac_menu{
    background:transparent url(../images/bg_menu.png) repeat top left;
    float:left;
    position:relative;
    height:90px;
    width:0px;
}

.ac_menu > ul{
    float:right;
}

.ac_menu > ul > li{
    float:left;
    position:relative;
    height:90px;
    overflow:hidden;
}

.ac_menu > ul > li a{
    margin-top:60px;
    opacity:0;
    display:block;
    height:90px;
    padding:0px 10px;
    text-align:center;
    line-height:90px;
    outline:none;
    font-size:18px;
    font-weight:bold;
    text-shadow:1px 1px 1px #000;
}

.ac_subitem{
    width:400px;
    height:0px; /* animate to 400px */
    top:50%;
    right:0px;
    margin-top:0px; /* animate to -200px */
    position:fixed;
    z-index:99;
    overflow:hidden;
    background:transparent url(../images/bg_menu.png) repeat top left;
}

.ac_subitem h2{
    font-size:22px;
    font-weight:bold;
    color:#fff;
    padding: 40px 0px 0px 40px;
    text-shadow:0px 0px 1px #000;
}
.ac_subitem ul{
    padding:0px 40px;
}
.ac_subitem ul li{
    margin:10px 0px;
}
.ac_subitem ul li:first-child{
    font-size:14px;
    text-transform:none;
    border-bottom:1px dotted #333;
    padding-bottom:15px;
    margin-bottom:15px;
}

span.ac_close{
    float:right;
    margin:10px;
    width:11px;
    height:12px;
    cursor:pointer;
    background:transparent url(../images/close.png) no-repeat top left;
    opacity:0.4;
}
span.ac_close:hover{
    opacity:1.0;
}

var $ac_background  = $('#ac_background'),
$ac_bgimage     = $ac_background.find('.ac_bgimage'),
$ac_loading     = $ac_background.find('.ac_loading'),

$ac_content     = $('#ac_content'),
$title          = $ac_content.find('h1'),
$menu           = $ac_content.find('.ac_menu'),
$mainNav        = $menu.find('ul:first'),
$menuItems      = $mainNav.children('li'),
totalItems      = $menuItems.length,
$ItemImages     = new Array();

$menuItems.each(function(i) {
    $ItemImages.push($(this).children('a:first').attr('href'));
});
$ItemImages.push($ac_bgimage.attr('src'));

А теперь приступим к нашей главной функции:

var Menu            = (function(){
    var init                = function() {
        loadPage();
        initWindowEvent();
    },
    loadPage            = function() {
        /*
            1- загружает все фоновые и другие изображения;
            2- отображает фоновое изображение;
            3- скрывает и открывает меню;
            4- отображает пункты меню;
            5- инициализирует события, связанные с пунктами меню
         */
        $ac_loading.show(); //отображение иконки загрузки
        $.when(loadImages()).done(function(){
            $.when(showBGImage()).done(function(){
                //скрывает иконку загрузки
                $ac_loading.hide();
                $.when(slideOutMenu()).done(function(){
                        $.when(toggleMenuItems('up')).done(function(){
                        initEventsSubMenu();
                    });
                });
            });
        });
    },
    showBGImage         = function() {
        return $.Deferred(
        function(dfd) {
            //подсчитывает размеры изображения
            adjustImageSize($ac_bgimage);
            $ac_bgimage.fadeIn(1000, dfd.resolve);
        }
    ).promise();
    },
    slideOutMenu        = function() {
        /* подсчитывает новую ширину меню */
        var new_w   = $(window).width() - $title.outerWidth(true);
        return $.Deferred(
        function(dfd) {
            //скрывает меню
            $menu.stop()
            .animate({
                width   : new_w + 'px'
            }, 700, dfd.resolve);
        }
    ).promise();
    },
        /* скрывает / отображает пункт меню */
        toggleMenuItems     = function(dir) {
        return $.Deferred(
        function(dfd) {
            /*
            скрывает / отображает пункты меню.
            каждый раз разная анимация.
            */
            $menuItems.each(function(i) {
                        var $el_title   = $(this).children('a:first'),
                            marginTop, opacity, easing;
                        if(dir === 'up'){
                            marginTop   = '0px';
                            opacity     = 1;
                            easing      = 'easeOutBack';
                        }
                        else if(dir === 'down'){
                            marginTop   = '60px';
                            opacity     = 0;
                            easing      = 'easeInBack';
        }
                $el_title.stop()
                .animate({
                                    marginTop   : marginTop,
                                    opacity     : opacity
                                 }, 200 + i * 200 , easing, function(){
                    if(i === totalItems - 1)
                        dfd.resolve();
                });
            });
        }
    ).promise();
    },
    initEventsSubMenu   = function() {
        $menuItems.each(function(i) {
            var $item       = $(this), //