2

div を右から左にアニメーション化したい。その前に、長い dom を追加する必要があります。両方を一緒にすると、アニメーションがスムーズになりません。ライブデモについては、このFiddleを参照してください。

「Click 1」をクリック - 滑らかなアニメーションを実行します。
「リセット」をクリックします。
「Click 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;
}
4

1 に答える 1

0

基本的に、ヤンが言ったこと。

これらの新しく構築された要素を、DOM の代わりに documentFragment または jQuery オブジェクトに追加します。

    ...
    $("#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/

于 2013-03-01T06:43:17.300 に答える