带有浮动元素的更柔和的jquery动画

首先，看看如何更好地理解我的问题。

我正在为一个机构网站制作这个Jquery动画，其想法是向会员展示自己的面孔。单击时，它会在其中间展开一个包含成员描述的框

这两个动画负责所有主要更改

$('.espaco').animate({width:"302px", height: "378px",margin: "1px", padding: "0px"},500);
$('.first').animate({width:"228px"},500);

---

特别是在第二种情况下，div扩展和崩溃的动画效果滞后。所有这些都是因为浮动元素改变了位置，这让我发疯。你们知道有什么办法让它更柔软吗

我找到了一个解决方案\o/。我没有改变一件与班级有关的事情的定位，我只是限制了他们动作的大小。首先减小宽度a，然后减小高度。所以它不会显示空白洞。这就是所谓的回调。它本质上是对动画进行排序

因此：

$('.espaco').animate({width:"0px",height:"228px",margin: "0px", padding: "0"},500);

变成这样：

    $('.espaco').animate({height:"228px",margin: "0px", padding: "0px"},function (){
        $('.espaco').animate(
            {width:"0px"},
            {duration:500}
        );
    });

最终代码如下：

---

希望我能帮助别人

这主要是一个CSS问题，一个我有点不擅长的主题。但是，我不认为需要两个单独的动画。由于“.espaco”始终位于同一位置，因此无论单击哪个方块，为什么不将“.espaco”放置在已渲染的中间位置，然后：1。将“.espaco”宽度设置为0。在“设置动画”中，将“宽度”调整为所需的宽度。网格的其余部分应自行处理。换句话说，仅对“.espaco”进行动画处理。在本代码中，“espaco”中的动画是项目的要求之一，因为它必须位于同一空间。隐藏div“espaco”时，会显示div“banner”，反之亦然。因此，两个div“首先”必须调整它们的大小，而这个过程并没有使动画变软。我不知道你是否看到了代码，但在这里我看到了，然后我意识到我的评论是多么毫无意义。对不起，广场正在重新排列自己的高度和宽度。