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到中心

回答

相關問題