jQuery: Animate Ränder auf Auto?

Ich versuche zu animieren, ein Bild so, dass es zentriert sich. Hier der code, den ich verwenden möchte:

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

Aber wenn ich das mache, es wird ignoriert und ändert nichts an der Marge.

Gibt es eine Möglichkeit zu animieren, eine margin auf auto, oder anderes center zu einem Bild?

Dank!

InformationsquelleAutor Nathan | 2010-12-22
  1. 11

    Als 'auto' ist nicht eine Zahl, jQuery können nicht animiert werden.

    Wenn Sie in Ordnung sind mit unter das Bild aus dem Textfluss des Dokuments können Sie festlegen, position absolute oder fixed und versuchen:

    $('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 });
    • Wenn Sie möchten, animieren Sie die vertikale Zentrierung zu, duplizieren Sie die Zeile, und ersetzen Sie Links mit oben und Breite mit der Höhe zu.
    InformationsquelleAutor nsdel
  2. 2

    Können Sie nicht animieren, eine auto Eigenschaft. Richtig animieren Sie das element in die Mitte des Bildschirms, werden Sie brauchen, um es zu positionieren absolutely (oder andere) und berechnen Sie dann die Display-Größe, element Größe, und die scroll-position. Hier ist ein eine andere Antwort auf etwas ähnliches. Hier ist die Geige

    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;
}

    Alternativ, wenn Sie möchten, dass nur die horizontale Ausrichtung können Sie entfernen Sie die Obere von der animate-Funktion. Und wenn Sie wirklich wollen, um kreativ zu werden, können Sie entfernen Sie die position:absolute, und positionieren margin:auto nach der animation bei der Bildschirm Größe. Finden Sie andere Geige.

    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();
    InformationsquelleAutor Josiah Ruddell
  3. 0

    Erweiterung auf Josiah Ruddell ' s Antwort. Wenn Sie Jungs müssen Ihr Bild zu halten fließen in das Dokument, verwenden Sie diese modifizierte version von Josiah ' s Antwort. Mein Bild war ursprünglich positioniert margin: 0 -1000px und Folien in den berechneten Rand Links und rechts. Während seiner Strömung in den dom die ganze Zeit

    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;
}
    InformationsquelleAutor B. Kwok
Schreibe einen Kommentar