[laimas]

Вы не правильно сделали, не корректно работает.

У вашей модели есть странности, что-то в относительных единицах, что-то в абсолютных, для кого-то наследование от родителя, в то же время кому-то жестко прописывается свое индивидуально. Сомнительно чтобы эта модель откликалась на изменения разрешений экрана.

А коли такое, и вы что-то там меняете постоянно, то эти величины в коде должны быть не прописаны жестко, а получаться как параметры объектов. Иначе придется и там, и там править.

То есть, величина 100, должна получаться именно так как я писал ранее, а не быть прописанной как 100 в JS-сценарии. Но как говорилось выше, у вас путаница с единицами, а по идее у блока logo , должно быть вместо:

margin: 1.25em 1.25em 1.25em 1.25em; (кстати, это нужно записывать так - margin: 1.25em так как все четыре величины равны)

должно быть:

margin: 30px;

Иначе при расчетах с относительными единицами возникают погрешности.

Код блока logo сделать таким:

<div class="logo">
    <div id="btn-swap"></div>
</div>

удалив из стилей:

.logo .image {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer
}

и добавить:

#btn-swap {
    width: 40px;
    height: 76px;
    background: url(images/avatar.png);
    cursor: pointer;
}

#swap {
    width: inherit;
}

В JS коде добавляем еще одно значение, которое будет использоваться в анимации, и теперь будет так:

var pW, //ширина панели меню
        pH, //ширина свернутой панели
        pD, //режим панели меню
        mW; //ширина блока main

А код управления панелью и блоком main таким:

//управление панелью меню
        var pO = $('#btn-swap').click(function() {
            pD ^= 1; //изменить направление
            if(!pW) { //получить параметры 
                pW = pO.width(); 
                pH = pW - ($(this).width() + $(this.parentNode).offset().left * 2);
                mW = $('#main').offset().left
            }
            pO.stop()
              .animate({width : pW - pH * pD}, 400) //сворачиваем/разварачиваем панель
              .find('#swap')
              .stop()
              .animate({marginLeft : -pW * pD}, 300); //смещение элементов панели
            //центрирование блока main
            $('#main').stop().animate({marginLeft : mW - pH * pD}, 400)  
        }).closest("#header"); //получаем панель меню

Теперь изменяя параметры блоков через их стили, данный код можно будет не править. Теперь в коде непосредственно прописаны только скорости анимации объектов, причем скорости анимации панели и блока main равны. Ширина блока swap задается в css и наследуется от родителя, поэтому ее определение теперь удалено из JS сценария. Но как это работает?

Расчетное значение ширины панели (pW) получается 375рх.
Ширина свернутой панели ($(this).width() + $(this.parentNode).offset().left * 2) будет равна 100px, а значит величина (pH) на которую изменяется ее ширина равна 375рх - 100рх = 275рх.
Отступ слева блока main прописан в CSS и равен 420рх, эту величину мы получили и сохранили в переменной mW. При изменении ширины панели на 275рх, на эту же величину должен изменяться и отступ блока main, то есть 420 - 275 = 145рх.

Управление панелью и блоком main производится за счет изменения их свойств посредством переменной pD, определяющей режим работы. При каждом щелчке по логотипу у этой переменной устанавливается/сбрасывается ее младший бит операцией XOR, и начиная от первого щелчка будет - 1, 0, 1, 0, 1 и т.д.

Следовательно анимируются свойства объектов (от текущего значения до нового):

ширина панели
а) свернуть: 375 - 275 * 1 = 100
б) развернуть: 375 - 275 * 0 = 375

смещение элементов панели
а) за пределы экрана: -375 * 1 = -375
б) вернуть на место: -375 * 0 = 0

смещение блока main
а) при свернутой панели: 420 - 275 * 1 = 145
б) при развернутой панели: 420 - 275 * 0 = 420

А теперь посчитайте что будет при значении 255, которое вы указали и не понятно откуда взятое, вместо мной прописанного 420 и реально существующем. Вот отсюда так и работает теперь у вас.

PS. Комментарии в коде я пишу для вас, клиенту они не нужны, да и отлаженные сценарии лучше сжимать, удаляя из них лишнее. Тоже самое нужно делать и с файлами стилей.

Не определяйте идентификаторы элементам, если в этом нет необходимости, и используя затем идентификатор как селектор в файле CSS.

Необходимо помнить, что поиск элементов по селектору имени класса означает, что JS вынужден обойти все объекты на странице в поиске таковых. А если нужно получить, например, только элементы DIV с определенным классом, то перетряхивание остальных элементов, это лишняя трата времени и ресурсов. В этом случае правильнее писать не $('.class_name'), а $('div.class_name').