6

html:

<div id="container">
    <div id="header">
          <div id="animate">
        cartagena
      </div>
        </div>

私がやりたいのは、Jqueryを使用して「アニメーション化された」divを中央に移動することです。

私の現在のjs:

$(document).ready(function() {
      $("#animate").animate({left: "+=512"}, 2000); 
});

右に 512 ピクセルだけではなく、中央に配置したいと思います。

4

4 に答える 4

6

#animateの位置はであると想定していabsoluteます。要素を親要素の中央に配置するには、親の幅の半分から独自の幅の半分を引いた値を に追加しleftます。

$("#animate").animate({
    left: $("#animate").parent().width() / 2 - $("#animate").width() / 2
}, 2000);

jsFiddle を使用してデモを作成しました。

于 2012-12-06T08:45:48.140 に答える
2

この方法で画面の中央に配置できます。

Jquery

$(document).ready(function() {
  $("#animate").animate({left: $(window).width() / 2}, 2000);
});

css

<style type="text/css">
div
{
     height: 50px; width: 50px; background-color: Red;position:absolute; top:0; left:0;
}
</style>

html

<div id="container">
    <div id="header">
        <div id="animate">
            cartagena
        </div>
    </div>
</div>
于 2012-12-06T08:54:16.420 に答える
2

ウィンドウを中央に配置したい場合は、次のコードを使用します。

$("#myJQUIDialog").parent().position({
    my: "center",
    at: "center",
    of: window,
    using: function (pos, ext) {
        $(this).animate({ top: pos.top }, 600);
    }
});

これにより、ダイアログが中央に配置され、同時にアニメーション化されるため、スムーズに中央に配置されます

于 2016-07-18T14:30:35.357 に答える