Jquery 如何平滑地为相对定位的div设置动画，以填充其他div留下的间隙？

这是一个使用相对定位六边形的菜单。当我单击其中一个六边形时，其他六边形将消失，单击的六边形将接收选定的类，并在div的左上角高亮显示

动画是突然的，部分原因是其他演员消失的方式

在这种情况下，如何平滑地设置选定div位置变化的动画？这里有一个动画链接（注意：前三个元素平滑移动）

$（文档）.ready（函数（）{
$（'.hexagonTile'）。单击（函数（e）{
var items=$（this.find（'.circle a'）；
对于（变量i=0，l=items.length；i

请假设您单击了中间行右侧的六边形（左上角的第七个六边形）

所有六边形的宽度，但这开始从200减少到199到198

当它们的宽度变为140px时，第一行具有5六边形不透明度，因此您的5六边形（第2行左侧）跳到第一行

然后所有的六边形都向左跳140px。这种跳跃重复几次，宽度减小，使我们感觉移动不平稳

---

因此，您必须使用绝对定位使六边形独立于其他位置。

请假设您单击了中间行右侧的六边形（左上角的第七个六边形）

所有六边形的宽度，但这开始从200减少到199到198

当它们的宽度变为140px时，第一行具有5六边形不透明度，因此您的5六边形（第2行左侧）跳到第一行

然后所有的六边形都向左跳140px。这种跳跃重复几次，宽度减小，使我们感觉移动不平稳

---

因此，您必须使用绝对定位使六边形独立于其他位置。

非常感谢您的回答，但所选项目的过渡仍在颤抖。是的，我看到了，但我认为这有点困难。请尝试更改一些内容以获得更好的性能。例如，单击“我更改我的答案”可转移当前行并隐藏其他行。非常感谢您的回答，但所选项目的转换仍在颤抖。是的，我看到了，但我认为这有点糟糕。请尝试更改一些内容以获得更好的性能。例如，单击“我更改答案”后，转移当前行并隐藏其他行。

$(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);

        }
    });
});