如何將動畫div保留在容器中

Question

我在另一個容器div中有4個圖塊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/

Answer 1

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