In jQuery können Fadeout Sie (), ohne das Element Immobilien zu verlieren? (Unsichtbar vs display: none)

StackOverflow https://stackoverflow.com/questions/3074015

Frage

Weil ich fadeIn () ein anderes Element der gleichen Größe zurück muß, ist es eine Möglichkeit, fadeOut () das Element, so dass der Raum gehalten wird, so dass die anderen Elemente sind nicht neu geflossen für den Bruchteil einer Sekunde und dann die fadeIn () wird ein weiteres Element mit der gleichen Größe zurückbringen?

War es hilfreich?

Lösung

Zwei Techniken in den Sinn kommen:

  1. Wickeln Sie das Element in einem div, die die richtige Menge an Raum einnimmt.
  2. Verwenden Sie die .animate Methode, um die Undurchsichtigkeit des Elements von 100% auf 0% zu ändern, dann, wenn die Animation beendet ist, tauschen Sie das neue Element in und wieder belebten verwenden, um die Opazität von 0% bis 100% zu ändern.

Andere Tipps

Mein Vorschlag ist, dass Sie es mit div wickeln ... und setzen die gleiche Dimension auf diesem div ...

Halten Sie das Element, das Sie in einem festen <div style="display:block;width:300px;height:200px;"> verblassen wollen, dann, wenn Sie das Element im Inneren verbergen, wird es nicht das Layout überhaupt beeinflussen.

Ich habe meine eigenen fix gemacht. Bevor ich die fadeOut laufen, laufen ich diese Funktion:

    /**
     * Keep the window height, to avoid user being thrown up (i.e. on fade out, remove, hide, etc)
     */

        function keepHeight() {
            $('body').css('min-height', $(document).height());
        }

So zum Beispiel:

/**
 * Keep window height
 */

    keepHeight();

/**
 * Fade out
 */

    $('#someDiv').fadeOut();
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top