动画div元素从左到右动画

我有一个由div组成的菜单系统，我希望每次用户鼠标hover在菜单项上时滑动左侧属性，但是当菜单项从左向右移动时我需要外部div（黑色）元素展开我也希望div元素（.container）向后滑动并收缩外部div元素（这个黑色div是0宽度）我有一个基本的例子在jsFiddle完成它olny将元素移动到左边

Answer 1

您应该能够通过让代码不在最后一个.content上执行来解决left is null问题，如下所示：

$('.container').not(':last').find('.menu-item').mouseenter(function () { 

这不适用于绿色框内的菜单项。

对于重新展示的问题，我会改变你的展示方式。 不要将盒子从另一个盒子后面滑出，你可以将它放在你希望它最终的位置并隐藏它，然后你可以使用：

 .animate({width: 'show'}) 

这将产生类似的滑动效果。

那个，或者类似于我对你的另一个问题的回答，只是没有我以前的崩溃：

http://jsfiddle.net/V3RHr/3/

Answer 2

完全理解有点麻烦，但这是什么意思？

http://jsfiddle.net/V3RHr/2/

Answer 3

如果我可以稍微改写你的html，我会把每个.menu-item放到一个无序列表中。

当您将鼠标放入无序列表时，将展开第二个容器。 在mouseenter函数中，当你鼠标输入列表项时，我会有第二个事件，你填充第二个容器和stopPropogation。

你可能仍然可以在第一个容器上使用div.menu-item ，在div.menu-item上使用另一个div.menu-item ，但是你的第一个容器有额外的高度和宽度。