jqueryのは、中央に

Question

HTMLのdivをアニメーション化：私は何をしたいか

<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を使って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

あなたはこのコードを使用して、ウィンドウを中央に配置したいAsuming：このセンター

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

ダイアログを、スムーズなセンタリングで