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)回调中..例如：

{{1}}

滑入菜单 - 关闭画布

2 个答案: