滑入菜單-關閉畫布

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)