jquery animer un div pour le centre

html:

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

ce que je veux faire est de déplacer les "animés" div au centre à l'aide de Jquery.

mon js:

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

et maintenant, je voudrais rendre au centre au lieu de seulement 512 px vers la droite.

Au centre de quoi? #header, #conteneur, un document, une fenêtre?

OriginalL'auteur Wouter Vandenputte | 2012-12-06

  1. 6

    Je suis en supposant que la position de #animate est absolute. Au centre de l'élément dans son élément parent, il suffit d'ajouter la moitié de ses parents largeur de moins de la moitié de sa propre largeur de left:

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

    J'ai créé un démo à l'aide de jsFiddle.

    il ne fonctionne plus sur refresh (actualiser): /
    Il devrait se comporter de la même manière sur un navigateur rafraîchir... de toute façon, vous pourriez essayer de réglez la gauche de la valeur avant d'animer.

    OriginalL'auteur Matthias

  2. 2

    Vous pouvez l'utiliser de cette façon pour le centrer à l'écran,

    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>

    OriginalL'auteur Swarne27

  3. 2

    Considère que vous souhaitez au centre de la fenêtre, utilisez ce code:

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

    Ce centre de la boîte de dialogue, et de les animer en même temps, ce qui entraîne une douceur de centrage

    OriginalL'auteur BernieSF

  4. -2

    Ici, c'est l'autre exemple, peut-être qu'il devrait être utile.
    Je suis à l'aide de défilement pour faire les effets.

    Espère qu'elle pourra aider ou d'être utile :)...

    <http://jsfiddle.net/p609dm7y/2/>

    Désolé, pour downvoting, mais votre réponse n'est pas quelque chose d'utile, à mon avis. Il y a déjà trois réponses valables, y compris un jsFiddle démo. Si vous fournissez des extraits de code, assurez-vous qu'ils démontrent ce que l'OP a été demandé.

    OriginalL'auteur Vitor Hugo