Slide in menu - off canvas

Question

I have a menu that is hidden from view (for mobile) using CSS:

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

When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.

I have the following 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');
    });

The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?

Answer 1

Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate

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

Currently, you are showing the content while the animation is going on which is why you see the content right away.

Answer 2

you have to put the code you want to be executed after the animation in the complete callback .. for example:

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