jQuery, CSS: Animieren folgender DOM-Elemente nach der Anzeige: keine

Question

Eine kurze Frage.
Wenn ich ein div auf display: none setze, werden die folgenden Elemente im DOM an die Stelle springen, wo das div war.
Wie kann ich diesen Sprung animieren, dass er sich nur sanft nach oben bewegt?

Thnaks im Voraus für jede Hilfe!

Answer 1

Sie können nicht. Anstelle der Anzeige: keine; mach es mit der Höhe: 0; und Übergang: Höhe .5s; Überlauf versteckt;

Dann werden Sie andere Divs neben anderen leicht verschieben. :)

Wenn du willst, kann ich einen einfachen Codepen machen.

Answer 2

Verwenden slideUp() statt hide();, wenn Sie verwenden jquery

$('.hidden').slideUp(); 

Answer 3

Gerade sie animieren. jQuery hat viele Möglichkeiten, es zu tun, zum Beispiel:

$('#myDiv').hide(200); // 200ms 

Answer 4

Um zu vermeiden, mit einer Breite ein verborgenes Element zu halten, die mit anderen Elementen auf der Seite stören könnten, sollten Sie einfach:

$('yourElement').slideUp(); 

Auf diese Weise Sie werden die Höhe yourElement animieren und schließlich, um es tatsächlich aus dem Elementfluss zu entfernen.

Bearbeiten: Danke A. Wolff für den Kommentar. Unnötige Funktion nach .slideUp() entfernt.

Answer 5

Noch eine bessere Lösung für Sie. Sie können die blaue Box mit jedem Klick auf die rosa Box ein- und ausblenden.

$('.pinkBox').click(function() { 
 
    $('.pinkBox').addClass('show'); 
 
    $('.blueBox').addClass('displayed'); 
 
}); 
 

 
$('.blueBox').click(function() { 
 
    $('.pinkBox').removeClass('show'); 
 
    setTimeout(function() { 
 
     $('.blueBox').removeClass('displayed'); 
 
    }, 300); 
 
});

.blueBox { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: blue; 
 
    transition: all .3s ease; 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.pinkBox { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: pink; 
 
    transition: all .3s ease; 
 
    position: absolute; 
 
} 
 
.show { 
 
    transform: translateY(100px); 
 
} 
 
.displayed { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='blueBox'> 
 
</div> 
 

 
<div class='pinkBox'> 
 
</div>