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

jquery动画div到中心

4 个答案: