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 px。

Answer 1

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

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

我用jsFiddle创建了一个demo。

Answer 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>  

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/>