Вы не правильно сделали, не корректно работает.
У вашей модели есть странности, что-то в относительных единицах, что-то в абсолютных, для кого-то наследование от родителя, в то же время кому-то жестко прописывается свое индивидуально. Сомнительно чтобы эта модель откликалась на изменения разрешений экрана.
А коли такое, и вы что-то там меняете постоянно, то эти величины в коде должны быть не прописаны жестко, а получаться как параметры объектов. Иначе придется и там, и там править.
То есть, величина 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').
)
