Sequential CSS and jQuery

Question

I want to execute my second line only once the first line has completed. In other words, once my .events divs has had the height set to 500px, I want the .padding divs to update their height. The height of the .padding divs cannot be changed until the .events divs are at 500px.

How can I accomplish this?

$('.events').css('height', '500px');
$('.padding').css('height', 'calc(100% - 2em)');

Thanks in advance!

Those properties are applied as soon as you set those values, unless you have set an animation over the height property — Fabrizio Calderan, Jan 14 '20 at 10:31
But they are applied in sequence. Do you have CSS transition? If so, then you need to set delay for your second line of code — Justinas, Jan 14 '20 at 10:35
Does this answer your question? [how to wait for css transition to finish before applying next class](https://stackoverflow.com/questions/18592933/how-to-wait-for-css-transition-to-finish-before-applying-next-class) — Justinas, Jan 14 '20 at 10:35
you need to share your html code to understand all things. Because it's need to be clear the dependency of that
to each other. — Shafayet Hossen, Jan 14 '20 at 10:50
can you use `animate()`? Or it seems you already have CSS transition set up — nonopolarity, Jan 14 '20 at 11:00
@Rory, there is no transition. But I do not want the second line happening until the first completes. If I must add a transition to make this work, then I can do that. But how? Thanks so much! — NotAnotherCliche, Jan 14 '20 at 11:03

score 0 · Answer 1 · answered Jan 14 '20 at 11:21

If you are chaining animation on one element, you can just chain the animate()

$("#foo").animate().animate();

but your case is two different elements, so you can use

$("#foo").animate(() => $("#bar").animate());

The 2000 is added for a 2 second animation. It is optional.

$('.events').animate({
  height: '100px'
}, 2000, () => {
  $('.padding').animate({
    height: '100px'
  }, 2000)
})

.events {
  background: yellow;
  height: 20px;
}

.padding {
  background: #07f;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="events"></div>
<div class="padding"></div>

This is the "complete" in the jQuery docs. It is a callback function given when the first animation is complete.

score 0 · Answer 2 · answered Jan 14 '20 at 12:08

You can use $.Deffered to call apply something only after the completion of another execution. https://api.jquery.com/jQuery.Deferred/

function changeHeight() {
        let Deferred = $.Deferred();
        $('.events').css({
        'height': '500px',
        'background-color':'red'
        });
        return Deferred;
    }
    
    function setPaddingHeight() {
        $('.padding').css({
        'height': parseFloat($('.events').height()-100)+'px',
        'background-color':'yellow'
        });
    }
    changeHeight().done(setPaddingHeight());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='events'>
Event Class area
</div>
<div class="padding">
padding area
</div>

Sequential CSS and jQuery

2 Answers2