Jquery fade and scale together

Question

I have this code: https://jsfiddle.net/og248ev0/

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

When top div fades out, second div jumps to its place above. (as expected)

How can I make it that after top div fades out, second div animates up, not just jumps?

Thanks

---

EDIT:

I have another version with text:

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

The problem here is that second item 'jumps' and animation end because of bottom margin.

Can I fix that?

Answer 1

You can use animate() separately for opacity and height. By default the animations are queued. So second will work after first.

$('.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