слайдов в меню - выкл холсте

Question

У меня есть меню, который скрыт от просмотра (для мобильных устройств) с помощью CSS:

#filter-column { 
    position:absolute; 
    left:-400px; 
} 

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

У меня есть следующий JQuery:

// Show/hide filters on mobile // 
    $("#openMobileFilters").click(function(){ 
     $("#filter-column").animate({left:'0'},600).css('position', 'relative'); 
     $('#results-container, #footer').addClass('hidden-xs'); 
    }); 
    $(".closeFilters").click(function(){ 
     $("#filter-column").animate({left:'-400px'},600).css('position', 'absolute'); 
     $('#results-container, #footer').removeClass('hidden-xs'); 
    }); 

Проблема заключается в том, когда я нажимаю, чтобы скрыть меню содержания показывает, прежде чем он на самом деле скрыт. Есть ли лучший способ сделать это?

Answer 1

Не видя это в действии в скрипке, я могу только предлагает вам переместить удаление скрытого класса до полной функции одушевленного

$(".closeFilters").click(function(){ 
    $("#filter-column").animate({left:'-400px'}, 600, function() { 
     $('#results-container, #footer').removeClass('hidden-xs'); 
    }).css('position', 'absolute'); 
}); 

В настоящее время, вы показывающее содержание в то время как анимация будет по которой вы сразу видите контент.

Answer 2

вы должны поставить код, который вы хотите быть выполнены после анимации в complete обратного вызова .. например:

$("#filter-column").animate({ 
    left:'-400px', 
    complete: function() {$('#results-container, #footer').removeClass('hidden-xs');} 
}, 600)