如何在容器中保留动画 div答案

【问题标题】：How to keep animated div within container如何在容器中保留动画 div
【发布时间】：2016-03-08 04:08:19
【问题描述】：

我在另一个容器 div 中有 4 个 tile div。

当一个 div 被点击时，其他 3 个消失。

我正在尝试获取单击后填充容器 div 的 div，但它无法正常工作。

如何让 div 向我最小化的 div 留下的空白空间设置动画？

这是我的代码，唯一的区别是 div 的位置，因为 JsFiddle 的结果窗口比我的浏览器小：

<h1 id ='title'>Welcome to TalposMedia</h1>
<div class='navTilesContainer'>
    <div id="profile" class="navTile topLeft"><p>Profile</p></div>
    <div id="contact" class="navTile topRight"><p>Contact</p></div>
    <div id="showcase" class="navTile bottomLeft"><p>Showcase</p></div>
    <div id="resume" class="navTile bottomRight"><p>Resume</p></div>
</div>

https://jsfiddle.net/w15ond4L/

【问题讨论】：

你的小提琴的工作方式......看起来你需要为与扩展有关的每个按钮添加一些条件......看起来它们都扩展到正确的大小...... .但是它们没有被重新定位，您需要修改每个按钮的左上角的x，y除了配置文件（因为一个从左上角开始不需要重新定位）......至少就是这样乍一看是什么样的
重新定位它们会不一致，因为左上角的瓷砖永远不需要重新定位，只有其他三个会四处移动我试图让瓷砖朝着开放空间的方向扩展剩下的其他瓷砖

标签： javascript jquery html css

【解决方案1】：

    $target.animate({
        height  : '+=335px',
        width   : '100%',
        top     : 0,
        left    : 0

【讨论】：

您能否详细说明为什么添加top:0,left:0 可以解决问题？
我很惊讶它是如此简单！虽然我不确定它为什么会起作用，但无论如何谢谢你
当你在 css 中使用 0 时......它被绝对使用......所以它基本上意味着，无论如何，将div 放在最顶部，一直到向左。
@Shubh 这是因为 jQuery 动画（和 jQuery css 操作）以两种方式之一工作：端点或增量。由于+= 前缀，动画的height 部分是一个增量，表示“将高度增加335px”。所以如果高度是 1px，动画变成 336px。但是我的代码提供了一种端点样式。 “动画元素的顶部从其父级变为 0，左侧从其父级变为 0”。所以现在每个被点击的元素的左上角都将被动画化到 0 顶部和 0 左边。这有意义吗？
@Marius'Romania'Talpos StackOverflow 不允许我@标记 2 个人，但我想让你知道我提供了解释。祝你好运！