如何在容器內保留動畫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/

來源

2016-03-08 Marius ' Romania' Talpos

你撥弄工作吧...的方式看起來你需要爲與擴展有關的每個按鈕添加一些條件......看起來他們都擴展到了正確的大小......但是他們沒有被重新定位，你需要修改頂部的x，y除了配置文件以外，每個按鈕的左上角（因爲那個s餡餅在左上方，不需要重新定位）...至少多數民衆贊成在第一眼看起來像 – ewizard

重新定位它們將是不一致的，因爲左上角的瓷磚不需要重新定位，只有其他三個會正在移動Im試圖讓瓷磚向其他瓷磚所留下的開放空間方向擴展 –

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

來源

2016-03-08 04:13:09 Nate

您可以添加更多詳細信息以說明爲什麼添加'top：0，left：0'解決此問題的原因？ – Shubh

我很驚訝，這是這麼簡單！雖然我不知道爲什麼它可以正常工作，但無論如何，謝謝你 –

當你在css中使用0時......它被絕對使用......所以它基本上意味着，無論如何，將'div'放在頂部，並一直走到左邊。 – ewizard

如何在容器內保留動畫div

回答

相關問題