Frage Animiere div von unten nach oben statt von oben nach unten in jQuery [duplizieren]


Diese Frage hat hier bereits eine Antwort:

Ich habe ein div was belebt zu seinem height beim Auslösen einer Klick-Funktion:

$('#menu').click(function() {
  $('#test').animate({
      height: 'toggle'
    }, 290, function() {    
  });
});

funktioniert bisher gut. Aber ich möchte das animieren div von unten nach oben und anders als hier gesehen Geige.

Irgendeine Lösungsmöglichkeit?


5
2018-03-22 13:35


Ursprung


Antworten:


Du könntest es in einen Behälter stellen und es absolut positionieren:

HTML:

<a href="#" id="menu">click me for menu</a>
    <div id="cont">
    <div id="test"></div>
</div>

CSS:

#cont{
    height:500px; width:50px; position:relative;
}
#test{
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0;
}

JavaScript:

$('#menu').click(function() {
    $('#test').animate({
        height: 'toggle'
        }, 290, function() {
    });
});

Geige

Edit: Warum es funktioniert
Ich habe einen Behälter um das Menü gelegt und ihm den Stil gegeben position:relative. Was ich für ein Menü halte (#test) wurde der Stil gegeben position:absolute was bedeutet, dass Sie es entsprechend positionieren können top,right,bottom und left, relativ zum umgebenden Element (vorausgesetzt, es hat a position anders als der Standard daher geben wir dem Container ein relative Position). Wenn wir dem Element a top:0;left:0 Die obere linke Ecke des Elements würde in der oberen linken Ecke des Elternelements bleiben, in ähnlicher Weise, wenn wir dies tun würden top:0;bottom:0 Die linke untere Ecke dieses Elements würde unten links von dem Elternelement verbleiben. Wandern, nicht wahr? Also, um es zusammenzufassen, #test "klebt" an der Unterseite des Elternteils, daher animiert es von unten. Ein weiterer schneller Punkt, die Containerhöhe ist wichtig! Weil wir gegeben haben #test eine absolute Position, wird es den Container nicht auf seine Höhe schieben, also stellen wir die Höhe sicher #test lädt 500px von der Oberseite des Containers.


12
2018-03-22 13:42