如何平滑地動畫相對位置的div填補其他div所留下​​的空白？

Question

這是一個使用相對定位的六邊形的菜單。當我點擊其中一個六邊形時，其他六邊形應該消失，點擊一個六邊形會接收選定的類，並在div的左上角突出顯示。

動畫是突然的，部分原因是他的方式其他divs消失。

在這種情況下，如何平滑地動畫改變所選div的位置變化？這裏有一個動畫鏈接（注意：前三個元素平穩移動）。

https://codepen.io/sobrancelhas/pen/MbOggV

$(document).ready(function() {   
    $('.hexagonTile').click(function(e) { 

     var items = $(this).find('.circle a'); 

     for(var i = 0, l = items.length; i < l; i++) { 
      items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; 
      items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; 
     } 

     e.preventDefault(); $(this).find('.circle').toggleClass('open'); 

     if($(this).hasClass('selected')){ 
      $(this).removeClass('selected', 1000); 
      $(".hexagonTile").not(this).animate({ 
       'height': 'show', 
       'width': 'show', 
       'opacity': 'show' 
      }, 1000); 

     } else { 
      $(this).addClass('selected', 1000); 
      $(".hexagonTile").not(this).animate({ 
       'height': 'hide', 
       'opacity': 'hide', 
       'width': 'hide' 
      }, 1000); 

     } 
    }); 
}); 

Answer 1

請假設你點擊中間行（從左上角的第7六邊形）的六邊形權。

所有六邊形的寬度，但這個開始，從200到199到198下降......

當它們的寬度變成140px的第一行六角不透明讓你六邊形（左第2排）跳到第一排！

以及之後的所有六邊形都跳出140px。這種跳躍通過寬度減少重複幾次，導致我們感覺不平滑。

所以你必須使用絕對定位到六邊形成爲獨立的每個其他職位。