Jquery 这种滑出式侧面板的更好方法？

我从头开始制作了这个滑出式侧面板：

我没有使用预先构建的脚本，因为我试图提高我的原始编码技能。我的方法有点难以捉摸和浮躁。。。当你点击“打开”时，红色面板有时会在下面的包装线上闪烁，我觉得这整个概念可能有一个完全不同的、更简单的方法

$(function() {
    $("#open").click(function() {
        openPanel();
    });

    $("#close").click(function() {
        closePanel();
    });
});

function openPanel() {

    $(".left-box").animate({
        width: "65%"
    }, 100);
    $(".panel").animate({
        width: "25%"
    }, 100)

}

function closePanel() {
    $(".panel").css("width", "0");
    $(".left-box").animate({
        width: "90%"
    }, 100);
}

---

看起来不错。。。下面是一个简单的编辑，用于停止闪烁，并简化单击处理程序：

$(function() {
    $("#open").click(openPanel);
    $("#close").click(closePanel);
});

function openPanel() {
    $(".left-box").css('margin-right', '0%').animate({
        width: "65%"
    }, 100);
    $(".panel").animate({
        width: "25%"
    }, 100)
}

function closePanel() {
    $(".panel").css("width", "0");
    $(".left-box").animate({
        width: "90%"
    }, 100, function(){$(".left-box").css('margin-right', '')});
}

---

面板的绝对位置？还是修好了？那确实管用。。。但我不想在面板的右边加5%。当您单击“打开”时，“按钮包裹div”会在面板捕捉回同一行之前下降一秒钟。很明显，我可以用蛮力方法解决这些问题（按钮上的绝对位置，打开前面板上不显示任何内容，等等），但这些方法感觉像是管道胶带解决方案。我是说，我喜欢管道胶带，但是……：）@KirkRoss根据您的评论，我更新了fiddle链接和代码--您需要在打开时删除左侧框上的

右侧边距

，在关闭时删除：）哦，您现在还可以设置面板关闭的动画，而不只是将其设置为0宽度…因此如果我们不在动画后立即添加边距，那么，这不就等于从CSS中删除它，这样就永远不存在了吗？最终，我想在两个框之间留一个空白，并认为所有内容加起来都是100%，不应该闪烁。我的想法是让左边的框用5%的边距填满整个窗口。。。5-90-5... 然后收缩使面板进入视野。90 -25 = 65.