Question

我有这样的div：

<div class="class1">
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4">
         <div class="class5"></div>
    </div>
</div>

该div在页面上存在多次。

现在我想删除一些子元素，重新排列其他子元素并以正确的方式为该过程制作动画。

目前我这样做。

示例：

var mainElement = $('class1');

mainElement.find('class2').css('property','value');
mainElement.find('class3').remove();
mainElement.find('class4').animate({'property': 'value'});

这样可行，但它并不像我希望的那样顺畅。当它一次做到一个元素时，它可以工作，但即使这有点不稳定。但是，主要的问题是这个代码是在页面加载时执行的，就像我之前说过的那样，它同时适用于更多元素。然后它变得非常不稳定，到了你根本看不到动画的地步。

有人可以向我解释如何以正确的方式做到这一点吗？

当我这样做时，例如$（'class1'）。fadOut（）非常流畅，即使对于50个元素同时也是如此。

问候，安迪

Answer 1

目前还不清楚你的动画是什么，但是如果你以一种导致页面重新流动的方式移动div，你将会得到糟糕的表现。尝试将div放在页面流中，使它们绝对定位。淡入淡出效果很好，因为它不会影响布局。

如何以正确的方式改变和动画div？

1 个答案: