滑入菜单-关闭画布

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)