jquery - 在一个 div 动画仍然落后于其他 div 之后

Question

情况：我有 3 个 div 的 |left|center|right| 我在左侧有 3 个其他 div，在右侧有 3 个其他 div。当我传入这 6 个 div 中的任何一个时，它们都会增加宽度。右边没问题，但是左边，当它长大时，仍然在中心 div 后面。

也更容易看到：将鼠标移到左侧菜单上，您仍然可以看到中心 div 中的文本。这种行为不会发生在右侧。

    <div class="wrapper">
        <div class="menu_left">
            <div class="item_left"> </div>
            <div class="item_left"> </div>
            <div class="item_left"> </div>
        </div>

        <div class="central">XXXXXXXX XXXXXXX</div>

        <div class="menu_right">
            <div class="item_right"> </div>
            <div class="item_right"> </div>
            <div class="item_right"> </div>
        </div>
    </div>
<script>
    //$("div").fadeIn(3500);

    $(".item_left").mouseenter(function() {
        $(this).animate({ width: "240px"}, 350);

    });
    $(".item_left").mouseleave(function() {
        $(this).animate({ width: "100px" }, 350);
    });
    $(".item_right").mouseenter(function() {
        $(this).animate({ width: "240px"}, 350);
    });
    $(".item_right").mouseleave(function() {
        $(this).animate({ width: "100px" }, 350)
    });
</script>

http://jsfiddle.net/lcssanches/E7B3t/1/

编辑：

左侧菜单：我想避免这个

右菜单：正确！

Answer 1

从下面的 CSS 代码来看，您似乎希望左/右项目覆盖 central div，只有您的错误是拼写错误 -postion:应该是position:

div.menu_left,div.menu_right{
  postion: relative;
  margin:0;
  padding:0;
  display:inline-block;
  width: 100px;
  height: 100%;
}

见http://jsfiddle.net/E7B3t/3/