jquery - CSS Top/Left 属性和 Jquery 动画

Question

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

 $("#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 逻辑，您可以将例如 float: left 或 float: right 分配给您想要并排排列的所有组件左边或右边。

然后当您移动一个元素时，所有其他设置为 float 在它旁边的元素都会随之移动。

DEMO - 使用您的动画逻辑的 float 示例

在演示中，您现在可以看到应用 float 时元素如何相互移动。

上面的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 个 Angular 中。

只要它们不获得任何固定位置，它们就会简单地随着 div 的动画移动。

DEMO - 带有 float 图像的动画

图像位于 div 容器中，通过使用 float: left 和 clear: right 例如，您告诉图像一直向左移动，强行打破它的权利。因此，任何其他使用 float: left 的图像都将被迫放在下面的行中。

这同样适用于 float:right 和 clear: right，这些设置强制图像保持在右侧并强制在其右侧中断，强制任何other 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>​

强制图像进入 Angular 落的样式:

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

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

希望对您有所帮助。你现在应该有很多东西可以玩了。

如果您现在遇到任何关于您的特定实现或任何您无法解决的 CSS 问题，完成此问题并询问新问题并发布您遇到问题的特定代码会更容易。