jQuery: Animer des Marges d'Auto?

Je suis en train d'animer une image, de sorte que les centres de lui-même. Voici le code que j'aimerais utiliser:

$('#myImage').animate({'margin-right': 'auto'});

Mais quand je fais ça, il est ignoré et n'en change pas la marge.
Est-il un moyen d'animer une marge d'auto, ou autrement centre d'une image?

Merci!

OriginalL'auteur Nathan | 2010-12-22

  1. 11

    'Automatique' n'est pas un nombre, jQuery ne peut l'animer.

    Si vous êtes d'accord avec la prise de l'image de l'écoulement du document, vous pouvez définir la position absolue ou fixe et d'essayer:

    $('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 });
    Si vous souhaitez animer verticale de centrage trop, dupliquer la ligne, en remplacement de gauche, avec top, de la largeur et de la hauteur.

    OriginalL'auteur nsdel

  2. 2

    Vous ne pouvez pas animer une auto de la propriété. Pour bien animer l'élément au centre de l'écran, vous aurez besoin de le positionner absolutely (ou autre) puis de calculer la taille de l'écran, taille de l'élément, et la position de défilement. Voici une de l'autre AFIN de répondre à sur quelque chose de semblable. Voici le Violon

    jQuery.fn.center = function () {
    this.css("position","absolute");
    var top = ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px",
        left = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px";
    this.animate({top: top, left: left});
    return this;
}

    Sinon, si vous voulez seulement l'alignement horizontal vous pouvez enlever le haut à partir de la fonction animate. Et si vous voulez vraiment faire preuve de créativité, vous pouvez supprimer le position:absolute, et repositionner margin:auto après l'animation en cas de redimensionnement de l'écran. Voir un autre violon.

    jQuery.fn.center = function () {
    this.css("position","absolute");
    var left = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px";
    this.animate({left: left}, function(){
        $(this).css({position: 'static', margin: '0 auto'});
    });
    return this;
}
$('#selector').center();

    OriginalL'auteur Josiah Ruddell

  3. 0

    Expansion sur Josias Ruddell de réponse. Si vous les gars ont besoin de votre image de garder son écoulement dans le document, utilisez cette version modifiée de Josias, réponse. Mon image était à l'origine placé à margin: 0 -1000px, et se glisse dans le calcul de la marge de gauche et de droite. Tout en gardant son débit dans les dom tout le temps

    jQuery.fn.center = function () {
  var margin = ( $(window).width() - this.width() ) / 2;
  this.animate({
    marginLeft: margin, 
    marginRight: margin
  }, function(){
    $(this).css({margin: '0 auto'});
  });
  return this;
}

    OriginalL'auteur B. Kwok