我想从右到左为一个 div 设置动画。在此之前,我必须在其中附加长 dom。如果我同时做这两个动画就不流畅了。看这个Fiddle现场演示。
单击“单击 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>
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;
}
最佳答案
基本上,就是 Jan 所说的。
将这些新构造的元素附加到 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)
...
关于长 DOM 追加后的 Jquery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15151906/