-1

CSS を使用してウィンドウの中央に a を配置し、jQuery の関数divを使用して左にスライドさせようとしています。animateCSS とアニメーション機能は機能していますが、アニメーションが開始divされると、右にジャンプしてその場所からアニメーション化されます。

問題を示すためにフィドルを作成しました。赤と黄のボックスは同じ中心位置から開始する必要がありますが、赤のボックスはウィンドウのさらに右側でアニメーションを開始することに注意してください。

http://jsfiddle.net/Zeaklous/XMKCc/2/

animate が CSS 中心の div なしで正しく機能することを証明するために、同じフィドルで javascript を使用して中心に配置された 2 つのボックスを含めました。ピンクのボックスは、私が期待する位置 (紫のボックスの真上) からアニメーション化されます。

animate で CSS 中心の div を正しく動作させるためにできることはありますか?

以下のコード

.centeredByCSS {
    left:0;
    right:0;
    margin:0 auto;
    width:50px;
    height:50px;
    position:absolute;
}

.centeredByJS {
    width:50px;
    height:50px;
    position:absolute;
    top:75px;
}

.yellow {
    background:yellow;
}

.red {
    background:red;
}

.purple {
    background:purple;
}

.pink {
    background:pink;
}

<div id="box1" class="centeredByCSS red">TEST1
</div>

<div id="box2" class="centeredByCSS yellow">TEST2
</div>

<div id="box3" class="centeredByJS purple">TEST3
</div>

<div id="box4" class="centeredByJS pink">TEST4
</div>

$(function(){
    //manually center the purple and pink boxes
    var location=(window.innerWidth/2)-parseInt($("#box3").css("width"))/2;
    $("#box3").css("left", location);
    $("#box4").css("left", location);

    // now animate two of the boxes 100 pixels left
    $("#box1").animate({left: "-100"}, 10000);
    $("#box4").animate({left: "-100"}, 10000);
})
4

1 に答える 1

1

中央に配置する CSS マークアップが正しくないためです。を持っている場合position:absolute;、margin:0 auto;はオブジェクトを中央に配置しません。代わりに、次のように、要素の幅の半分のleft:50%マイナスを使用する必要があります。margin-left

.centeredByCSS {
    left:50%;
    margin-left:-25px;
    right:0;
    width:50px;
    height:50px;
    position:absolute;
}

また、オブジェクトを現在の位置から -100px 左に移動する場合は、使用する必要があります-=

$("#box1").animate({left: "-=100px"}, 10000);
$("#box4").animate({left: "-=100px"}, 10000);

更新されたフィドル

于 2013-10-21T01:53:40.767 に答える