jQuery的动画一个div到中心

HTML：jQuery的动画一个div到中心

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

我想要做的是“动画”的div移动到使用jQuery中心。

我现在的JS：

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

，现在我想使它的中心，而不是仅仅512像素的权利。

来源

2012-12-06 Wouter Vandenputte

以什么为中心？ #header，#container，文档，窗口？ – pxx

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

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

我使用的jsfiddle创建demo。

来源

2012-12-06 08:45:48 Matthias

它不再工作在刷新：/ –

@WouterVandenputte它应该在浏览器刷新行为相同...无论如何，你可以尝试[设置左值]（http://jsfiddle.net/8gJAa/1 /）在动画之前。 – Matthias

你可以用这种方式将其中心到屏幕，

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-06 08:54:16 Swarne27

Asuming要居中到窗口，使用此代码：

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

该中心的对话框，并在同一时间动画，生成一种光滑定心

来源

2016-07-18 14:30:35 BernieSF

jQuery的动画一个div到中心

回答

相关问题