Здравствуйте, в JQuery человек новый, только начинаю изучать. Взял код скрипта с примера и немного адаптировал, но он выполняется своеобразно, есть ряд вопросов и буду признателен за помощ.
Почему Логоип появляется только после выполнения анимации?
после того как меню "выезжает" li должны выплыть снизу, почему этого не происходит?
и почему во премя процеса анимации выезда меню оно немного смещается вверх?
Заранее благодарен.
$(function() {
var $br_background = $('#br_background'),
$br_loading = $br_background.find('.br_loading'),
$br_content = $('#br_content'),
$menu = $br_content.find('.br_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'));
});
var Menu = (function(){
var init = function() {
loadPage();
initWindowEvent();
},
loadPage = function() {
$br_loading.show();//show loading status image
//hide the loading status image
$.when(slideOutMenu()).done(function(){
$.when(toggleMenuItems('up')).done(function(){
initEventsSubMenu();
});
});
$br_loading.hide();
},
slideOutMenu = function() {
/* calculate new width for the menu */
var new_w = $('.page-wrapper').width();
var new_w1 = 0;
return $.Deferred(
function(dfd) {
//slides out the menu
$menu.stop()
.animate({
width : new_w + 'px'
}, 700, dfd.resolve);
}
).promise();
},
/* shows / hides the menu items */
toggleMenuItems = function(dir) {
return $.Deferred(
function(dfd) {
/*
slides in / out the items.
different animation time for each one.
*/
$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();
},
initWindowEvent = function() {
},
loadImages = function() {
};
return {
init : init
};
})();
Menu.init();
});