javascript - jquery 将 div 动画到中心

Question

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 像素。

Answer 1

我假设 的位置#animate是absolute。要将元素在其父元素中居中，只需将其父元素宽度的一半减去其自身宽度的一半添加到left：

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

我使用 jsFiddle创建了一个演示。

Answer 2

You can use it this way to center it to the screen,

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>  

Answer 3

假设您想以窗口为中心，请使用以下代码：

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

这使对话框居中，并同时设置动画，从而实现平滑居中

Answer 4

这是另一个例子，也许它应该有用。我正在使用“滚动”来制作效果。

希望它可以帮助或有用:) ...

<http://jsfiddle.net/p609dm7y/2/>