我想要從右向左動畫div。在此之前,我必須在其中添加長dom。如果我在一起做動畫不光滑。看到這個Fiddle現場演示。長DOM附加後的jquery動畫
點擊「點擊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;
}
可以提高使用本地DOM API的附加性能('documentFragment's如有可能,並避免瀏覽器HTML解析),但如果你只是想等待迴流,只需在請求動畫之前查詢對象的計算樣式即可。 – 2013-03-01 06:35:53
需要一段時間才能追加。你也應該優化它(如果小提琴中的場景是現實的話)。 – 2013-03-01 06:39:19