JQuery verblassen und skalieren zusammen

Question

Ich habe diesen Code: https://jsfiddle.net/og248ev0/

<div class="a"></div> 
<div class="a"></div> 

Wenn oben div ausblendet, zweite div springt über auf seinem Platz. (Wie erwartet)

Wie kann ich es machen, dass nach oben div ausblendet, zweite div beseelt up, nicht nur Sprünge?

Dank

---

EDIT:

Ich habe eine andere Version mit dem Text:

https://jsfiddle.net/og248ev0/7/

Das Problem hierbei ist, dass die zweite Punkt 'springt' und Animation Ende wegen der Unterseite Spanne.

Kann ich das beheben?

Answer 1

Sie können animate() separat für opacity und height verwenden. Standardmäßig sind die Animationen in der Warteschlange. So wird Sekunde nach zuerst arbeiten.

$('.a').eq(0) 
 
    .animate({ 
 
    opacity: 0 
 
    }, 1000) 
 
    .animate({ 
 
     height: 0, 
 
     marginBottom:0 //to get rid of the final jump because of margin 
 
    }, 1000);

.a { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="a"></div> 
 
<div class="a"></div>

Fiddle