Последовательные CSS и jQuery

Question

Я хочу выполнить свою вторую строку только после завершения первой строки. Другими словами, как только мои .events divs установили height в 500px, я хочу, чтобы .padding div обновил их высоту. Высота .padding div не может быть изменена, пока .events div не будут на 500px.

Как я могу выполнить sh это?

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

Заранее спасибо !

Answer 1

Вы можете использовать $.Deffered для вызова применить что-либо только после завершения другого выполнения. 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>

Answer 2

Если вы объединяете анимацию в цепочку для одного элемента, вы можете просто связать animate ()

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

, но ваш случай состоит из двух разных элементов, поэтому вы можете использовать

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

2000 добавлено для 2-секундной анимации. Это необязательно.

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

Это "завершено" в jQuery документах . Это функция обратного вызова, предоставляемая после завершения первой анимации.