CSS Top / Left属性和Jquery动画

Question

在页面上，我有两个div，让我们说Left_Div和Right_Div。在右边div我有多个图像使用CSS的Top和Left属性定位。 Left_Div用作左侧面板，在按钮上单击我动画Left_Div和Right_Div向右滑动，Left_Div变为可见。就像facebook iphone app上的左侧菜单一样。

 $("#Right_Div").animate({ marginLeft: "600px" }, 500);    
 $("#LeftDiv").animate({ width: "600px", opacity: 1 }, 500);

问题是当Left_Div和Right_Div滑动时，使用Left和Right属性定位的图像不会移动，因此它们会重叠Left_Div。任何人请帮助我如何使用DIV移动图像。

我不想再次使用top / left属性，因为有很多图像并且它们是动态加载的。

我希望我已经解释了我的问题：）

Answer 1

如果您想要动态移动，则无法给出确切的位置。

通过说图像是从左边开始的一定数量的像素，无论如何，图像将始终完全存在。

您必须使用浮动逻辑，例如float: left或float: right为您想要在左侧或右侧彼此排列的所有组件分配。

然后当你移动一个元素时，所有其他被设置为浮动的元素都会随之移动。

DEMO - 使用动画逻辑的浮动示例

在DEMO中，您现在可以看到当应用浮动时元素如何相互移动。

上面的DEMO有以下HTML：

<div id="Left_Div">My left div</div>
<div id="anotherLeftdiv">My other left div</div>
<div id="anotherRightdiv">My other right div</div>
<div id="Right_Div">my right div</div>​

CSS：

#Left_Div, #anotherLeftdiv{
    float: left;
}

#Right_Div, #anotherRightdiv{
 float: right;   
}

脚本：

$("#Left_Div").animate({ width: "150px", opacity: 1 }, 500);
$("#anotherRightdiv").animate({ marginRight: "100px" }, 500);    

我希望这是有道理的。如果没有您当前的CSS和HTML，很难准确告诉您需要更改的内容。

修改
我向右侧div添加了4张图片，并使用float和clear将其放入4个角落，而不是固定定位。

他们只会随着div的动画一起移动，只要他们不获得任何固定位置。

DEMO - 带浮动图像的动画

图像位于div容器中，使用float: left和clear: right例如，您告诉图像一直向左移动并强制向右移动。因此，使用float：left的任何其他图像将被强制进入下面的行。

这同样适用于float:right和clear: right，这些设置会强制图片保持正确并强行向右突破，强制任何其他float: right进入下面的一行。

查看HTML中的图片：

<div id="Right_Div">
    <img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Eraser.png"/>
    <img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Script.png"/>
    <img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Ok.png"/>
    <img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Decrease%20time.png"/>
</div>​

强制图像进入角落的样式：

img.left{
    float: left;
    clear: right;
}

img.right{
    float: right;
    clear: right;
}

我希望这会有所帮助。你现在应该有很多可以玩的。

如果您现在遇到任何与您的具体实施或任何CSS无法解决的问题，那么更容易完成此问题并要求新问题发布您遇到问题的特定代码。