Toniq Toniq - 1 year ago 85
Javascript Question

Jquery fade and scale together

I have this code:

<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?



I have another version with text:

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

Can I fix that?

Answer Source

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

    opacity: 0
  }, 1000)
      height: 0
  }, 1000);
.a {
  width: 100px;
  height: 50px;
  background: red;
  margin-bottom: 10px;
<script src=""></script>
<div class="a"></div>
<div class="a"></div>