jQuery .animate () erzwingt den Stil "Überlauf: versteckt"

jQuery's .animate()erzwingt den Stil overflow: hiddenbeim Auslösen und spielt mit meinem animierten Element, weil ich ein anderes Element habe, das mit negativer Position außerhalb davon hängt. gibt es sowieso um das zu vermeiden?

Eine andere Möglichkeit besteht darin, das Element in CSS als ! Wichtig zu deklarieren .

Zum Beispiel.

.somediv {
  overflow: visible !important;
}

Dies ist der Quellcode:

  if ( isElement && ( p === "height" || p === "width" ) ) {
    // Make sure that nothing sneaks out
    // Record all 3 overflow attributes because IE does not
    // change the overflow attribute when overflowX and
    // overflowY are set to the same value
    opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
  ...
  ...
  ...
  }

if ( opt.overflow != null ) {
  this.style.overflow = "hidden";
}

Sie können dies auskommentieren, wenn Sie möchten, oder einfach $('element').animate().css('overflow', 'visible');wie zuvor vorgeschlagen verwenden.

Der Grund, warum der Überlauf auf "Ausgeblendet" gesetzt ist, besteht darin, dass Elemente innerhalb des zu animierenden Elements während der Animation im Element enthalten sind. Wenn Sie beispielsweise die Breite eines Elements verringern, versucht sein Inhalt möglicherweise, sich zu verlängern und nach unten zu "fallen".

Dies wird im obigen Quellcode durch den Kommentar erklärt:

// Stellen Sie sicher, dass sich nichts herausschleicht

Hoffe das erklärt es für dich.

Jede dieser Lösungen hat bei mir funktioniert, aber ich habe den Trick gefunden:

$(myDiv).animate(
   { height: newHeight},
   { duration: 500, 
     queue: false, 
     easing: 'easeOutExpo', 

     step: function() {
       $(myDiv).css("overflow","visible");
     }
   }
);

Erzwingen Sie das CSS in jedem Schritt der Animation. Ich hoffe es hilft.

Bei Verwendung $('element').animate().css('overflow', 'visible');kann es zu Problemen kommen, wenn overflow-xund overflow-yfür das Element bereits angegeben sind.

In diesen Fällen wird use verwendet, $('element').animate().css('overflow', '');wodurch nur das Überlaufattribut entfernt und das overflow-xund overflow-yintakt bleibt.

Sie können durch :

function(e){$('#something').css('overflowY', 'scroll');}

zum Parameter .animate () options als Funktion, die ausgeführt werden soll, wenn die Animation abgeschlossen ist, wie folgt:

$('#something').animate({
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll !important' //doesn't work
                }, { duration: 500, queue: false, complete: function(e){$('#something').css('overflowY', 'scroll');} } );

Meine bevorzugte Antwort ist zu verwenden $.Animation.prefilter. Hier ist ein Beispiel für jsfiddle.net.

Richten Sie den Vorfilter ein:

jQuery.Animation.prefilter(function(element, properties, options) {
  if (options.overrideOverflow) {
    jQuery(element).css("overflow", options.overrideOverflow);
  }
});

Dann benutze es

$(myDiv).animate(
  { height: newHeight},
  {
    duration: 500, 
    overrideOverflow: "visible" // Replace "visible" with your desired overflow value
  }
);

Beachten Sie, dass Sie den Optionsnamen nicht verwenden können overflow da jQuery diesen intern verwendet.

Obwohl diese Funktion in jQuery schon seit einiger Zeit verfügbar ist, scheint die Dokumentation nicht vollständig zu sein. Ein Dokumentationsentwurf ist jedoch verfügbar .

Siehe auch https://github.com/jquery/api.jquery.com/issues/256

PERFEKTE "Adler" (2 Beiträge nach oben). Wenn ich nicht auf Ihre Antwort gestoßen wäre, hätte ich stundenlang danach gesucht, wette ich.

"Eagle" hat den richtigen Weg dafür gefunden.

Alle anderen Lösungen sind nur Hacks. Dies war der richtige Weg (wiederholen), deshalb bieten sie Ihnen alle Optionen, wenn Sie die "animieren" -Klasse verwenden.

Im Folgenden sind einige der verfügbaren Einstellungen aufgeführt (aus der Dokumentation unter https://api.jquery.com/animate/ ). Ich brauchte die Einstellung "Vollständig", um eine Aktion auszuführen, wenn die Animation beendet war.

    duration (default: 400)
    easing (default: swing)
    queue (default: true)
    specialEasing
    step
    progress
    complete
    start
    done
    fail
    always

Dies wird die Arbeit mit Animationen erheblich vereinfachen und ich werde dieses Format für alle zukünftigen Animationen verwenden, unabhängig davon, ob es benötigt wird oder nicht.