jquery animować div centrum

Question

HTML:

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

co chcę zrobić, to przenieść "animowany" div do środka przy użyciu jQuery.

moje obecne JS:

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

i teraz chciałbym, aby go do środka, a nie tylko 512 px na prawo.

Answer 1

Zakładam, że pozycja #animate to absolute. Aby wyśrodkować element w jego elementu nadrzędnego wystarczy dodać połowę szerokości jego rodzica minus połowy własnej szerokości do left:

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

stworzyłem demo użyciu jsFiddle.

Answer 2

można go używać w taki sposób, aby wyśrodkować go na ekranie,

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 chcesz wyśrodkować do okna, użyj tego kodu:

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

tego centrum okno i animować w tym samym czasie, w wyniku gładkiej centrowania