Javascript 水平菜单动态添加div

嗨，我正在尝试在滑动面板之间添加红色的div。当您移动菜单项并滑出一个面板时，我的菜单将显示动画，但在每个面板之间，我希望动态添加/删除一个面板。当我说移除时，我的意思是当你向后浏览菜单，滑动面板缩回，然后移除最后一个红色div，当你用鼠标输入菜单项，滑动面板Exa，然后添加一个红色div（5px宽，高度无关），这就是我到目前为止得到的

$（文档）.ready（函数（）{
$（'.menu项'）.mouseenter（函数（）{
var curr=$（this）.closest（'.container'）；
var next=当前next（'.container'）；
动画（{'left'：curr.position（）.left+curr.width（）+5}）；
if（curr.index（）<（$（'.container'）.length-1））{
在这里，我需要添加和删除一个到右侧
当前（var curr）div的
}
var$index=curr.index（）+1；
$（'.container:n个子（'+$index+'））.nextAll（）.each（函数（）{
$（this.animate（{'left'：curr.position（）.left+curr.width（）+5}）；
});
});
});
.垫片
{
背景色：红色；宽度：5px；高度：200px；位置：绝对；z指数：1000；
}
菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7
菜单项8
菜单项9
菜单项10
菜单项11
菜单项12
菜单项10
菜单项11
菜单项12

这里。。。不是舒尔，如果这是好的，但看看这里：

E D I T

---

还有一个解决方案：

你好！我看到了同样的问题（我现在在家…最后（：D））我真的很想帮助你，但你很不清楚。一次又一次。你的剧本还是一样的。潜水舱开着，但。。。。车太多了。当我用鼠标向后悬停时，div没有正确缩回。这是你真正想要的吗？具体点。红色div的目的是什么？红色div是用来分离内容的。我看到一个我喜欢的控件，想复制它。我没有在里面发现任何虫子。在我看来，它可以正确地缩回，但是如果你能修复这些bug，那就很好了。我如何在没有任何bug的情况下缩回div呢？我想让我的div从左向右滑动，展开和缩回，在每个菜单面板（.div.container）之间，我想添加一个红色div，我怎么能更不干净呢？我正在玩。我会想办法的！使用.hover函数应该可以很好地工作，但是比所有的代码更改都要好。它不会一直向滑出的面板添加div元素，它只是添加了一个不完全是我想要的东西，如果其他人知道该怎么做，请留下答案或评论谢谢你的帮助我成功了感谢堆

    $(document).ready(function () {
        $('.menu-item').mouseenter(function () {
            var curr = $(this).closest('.container');
            var next = curr.next('.container');

            next.animate({ 'left': curr.position().left + curr.width() + 5 });

            if(curr.index() < ($('.container').length - 1)){
                here i need to add and remove a </div class="spacer"></div> to the right side
                of the current(var curr) div
            }

            var $index = curr.index() + 1;
            $('.container:nth-child(' + $index + ')').nextAll().each(function () {

                $(this).animate({ 'left': curr.position().left + curr.width() + 5 });

            });

        });
    });

.spacer
    {
        background-color:Red; width:5px; height:200px; position:absolute; z-index:1000;
    }

<table border="2" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="menu" style="background-color:Black; width:2000px; height:300px;top:5px; left:50px  ">
                <div class="container" id="1" style="left:0; width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua">
                    <div class="menu-item">Menu Item 1</div>
                    <div class="menu-item">Menu Item 2</div>
                    <div class="menu-item">Menu Item 3</div>
                </div>
                <div class="container" id="2" style="left:0; width:200px; height:300px; z-index:998; position:absolute; background-color:Blue">
                    <div class="menu-item">Menu Item 4</div>
                    <div class="menu-item">Menu Item 5</div>
                    <div class="menu-item">Menu Item 6</div>
                </div>
                <div class="container" id="3" style="left:0; width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia">
                    <div class="menu-item">Menu Item 7</div>
                    <div class="menu-item">Menu Item 8</div>
                    <div class="menu-item">Menu Item 9</div>
                </div>
                <div class="container" id="4" style="left:0; width:200px; height:500px; z-index:996; position:absolute; background-color:Green; float:left">
                    <div class="menu-item">Menu Item 10</div>
                    <div class="menu-item">Menu Item 11</div>
                    <div class="menu-item">Menu Item 12</div>
                </div>
                <div class="container" id="5" style="left:0; width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; float:left">
                    <div class="menu-item">Menu Item 10</div>
                    <div class="menu-item">Menu Item 11</div>
                    <div class="menu-item">Menu Item 12</div>
                </div>
            </div>

        </td>
    </tr>
</table>