jQuery-UI-blind-Effekt - zeigen von unten

Den Effekt, den Sie suchen, ist ein wenig schwierig zu erreichen, aber es kann getan werden, auch ohne wrapper-element.

Das Hauptproblem hier ist, dass die Elemente natürlich Rendern, top-down, nicht bottom-up. Animieren sowohl die top und height CSS-Eigenschaften ein relativ positioniertes element ermöglicht uns die Umsetzung einer slide-up-Effekt, aber das element wird noch Rendern von oben nach unten:

+-------------------------------------------+
|                                           |  ^
|                                           |  |  Hidden area collapses upwards.
|                                           |  |
+-------------------------------------------+ <-- 'top'
|                                           |  ^
|  |  Upper part of element (visible).      |  |  
|  |                                        |  |  Animation goes bottom-up.
|  |  Element still renders top-down.       |  |  
|  |                                        |  |
+-- | ----------------------------------------+ <-- 'top + height' 
|  |                                        |  |
|  |  Lower part of element (hidden).       |  |
|  V                                        |  |
+-------------------------------------------+

Wenn wir wollen, zu simulieren bottom-up-rendering, die wir ändern müssen, um die scrollTop Eigenschaft des Elements während der animation, um Ihren unteren Teil, immer im Blick:

+-------------------------------------------+
|                                           |  ^
|  |  Upper part of element (hidden).       |  |  Hidden area collapses upwards.
|  |                                        |  |
+-- | ----------------------------------------+ <-- 'top' and 'scrollTop'
|  |                                        |  ^
|  |  Element still renders top-down.       |  |  
|  |                                        |  |  Animation goes bottom-up.
|  |  Lower part of element (visible).      |  |  
|  V                                        |  |
+-------------------------------------------+ <-- 'top + height' 

Wir können animieren() mit scrollTop, aber damit in Verbindung mit top und height funktionierte nicht korrekt bei meinen tests (ich vermute scrollTop wird zurückgesetzt, wenn top oder height geändert, in der ersten animation Schritt, so landet es stecken 0).

Um dies zu umgehen, können wir Griff scrollTop uns durch die optionale Schritt - Funktion, die wir weitergeben können, um animate(). Diese Funktion wird mit zwei Argumenten aufgerufen, now und fx, now wird der aktuelle Wert der animierten Eigenschaft und fx wird ein wrapper-Objekt um nützliche Informationen, wie Sie das element und Eigenschaft animiert wird.

Da wollen wir immer scrollTop die gleichen sein wie top haben wir nur um zu testen, ob top animiert in unserer step Funktion. Wenn es ist, setzen wir scrollTop zu now. Diese Lösung bietet akzeptable Ergebnisse, obwohl es flackert ein wenig zu viel für meinen Geschmack (vielleicht ein Artefakt von meinem browser, obwohl).

So, in Zusammenfassung, die zum implementieren dieser Effekt, den wir haben:

• Fetch-element der ursprünglichen Höhe,
• Das element position: relative; so können wir animieren Ihre top Eigenschaft,
• Zusammenbruch des Elements durch Einstellung top auf die ursprüngliche Höhe und height zu 0,
• Zeigen Sie das element (notwendig in Ihrer fiddle seit display: none; angewendet wird),
• Animieren top zu 0 und height auf die ursprüngliche Höhe,
• Geben scrollTop den Wert top auf jede animation Schritt.

Resultiert in dem folgenden code:

$("#click").click(function() {
    var $revealMe = $("#revealMe");
    var originalHeight = $revealMe.height();
    $revealMe.css({
        position: "relative",
        top: originalHeight,
        height: 0
    }).show().animate({
        top: 0,
        height: originalHeight
    }, {
        duration: 1000,
        step: function(now, fx) {
            if (fx.prop == "top") {
                $(fx.elem).scrollTop(now);
            }
        }
    });
});

Können Sie es testen, in diese Geige.

InformationsquelleAutor Frédéric Hamidi

Wenn Sie ok sind, tu die jquery UI-Bibliothek können Sie :

$("div").hide("blind", {"direction": "down"});
$("div").show("blind", {"direction": "down"});

InformationsquelleAutor ZalemCitizen