長DOM附加後的jquery動畫

Question

我想要從右向左動畫div。在此之前，我必須在其中添加長dom。如果我在一起做動畫不光滑。看到這個Fiddle現場演示。

點擊「點擊1」 - 做一個流暢的動畫。
點擊「重置」。
點擊「點擊2」 - 壞的動畫。

-Any Help？

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> 

JS：

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); 
} 

CSS：

#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; 
} 

Answer 1

基本上，揚說什麼。

將這些新構造的元素附加到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)  
    ... 

http://jsfiddle.net/72CdX/