Toniq Toniq - 6 months ago 24
Javascript Question

Jquery fade and scale together

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

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
  }, 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

Comments