长时间DOM追加后的Jquery动画

我想从右到左设置一个div的动画。在此之前，我必须在其中附加长dom。如果我同时做这两件事，动画是不平滑的。现场演示见此

单击“单击1”-制作平滑动画。
单击“重置”。
单击“单击2”-不良动画

-有什么帮助吗

HTML:

<div>
    <div id="main-div" style="display: inline-block">
        <div id="div-1" class="inner-div">
        </div>
        <div id="div-2" class="inner-div" style="left: 300px; background-color: yellow">
        </div>
    </div>    
    <div style="display: inline-block; vertical-align: top">
        <input type="button" value='Call 1' onclick='DoAnimate(15)'/>
        <input type="button" value='Call 2' onclick='DoAnimate(4000)'/>        
        <input type="button" value='Reset' onclick='Reset()'/>
    </div>
</div>

function DoAnimate(count)
{
    $("#div-2").empty();

    for(var i = 0; i < count; i ++)
    {
        $("#div-2").append("<div> DIV " + i + "</div>");
    }

    $("#div-1").animate({left: -300}, 300);
    $("#div-2").animate({left: 0}, 300);
}

function Reset()
{
    $("#div-2").empty();

    $("#div-1").animate({left: 0}, 300);
    $("#div-2").animate({left: 300}, 300);
}

#main-div
{
    position: relative;
    height: 400px;
    width: 300px;
    background-color: red;
    overflow: hidden;
}

.inner-div
{
    height: 400px;
    width: 300px;
    background-color: pink;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: auto;
}

---

基本上，简是这么说的

将这些新构造的元素附加到documentFragment或jQuery对象，而不是DOM

    ...
    $("#div-2").empty();
    var $wrapper = $('<div />');
    for(var i = 0; i < count; i ++) {
        $wrapper.append("<div> DIV " + i + "</div>");
    }
    $("#div-2").append($wrapper)    
    ...

。。。
$（“#div-2”）.empty（）；
变量$wrapper=$（''）；
对于（变量i=0；i

---

您可以通过使用本机DOM API（

documentFragment

s，尽可能避免浏览器对HTML进行解析）来提高附加性能，但如果您只想等待回流，只需在请求动画之前查询对象的计算样式即可。附加需要很长时间。你当然也应该优化它（如果小提琴中的场景是现实的话）。

$wrapper

方法比直接方法快得多，但仍然太慢。还是一个不错的方法。@JanDvorak我们能比这种方法更快吗？@user10

documentFragment

s。。。但是我没有使用它们的经验。jQuery不支持它们，因此您必须深入研究本机DOM操作领域（这始终是一个很好的学习体验）。基本上，它们的行为类似于普通的DOM节点，只是当附加到任何位置时，它们会被其内容所取代。@JanDvorak，谢谢。让我也试试。