jquery - 一个函数中有两件事，其中之一必须等待

Question

我想在一个函数中完成两件事，我想首先将比例变为 0.5 然后将其删除但不起作用

$(document).on('click', '.remove', function() {
  $(this).parent().css({
    'transform': 'scale(0.5)'
  });
  $(this).parent().remove();
})

.planarea div {
  width: 225px;
  height: 220px;
  transition: .1s;
  background: #ffff00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="planarea">
  <div>
    <a class="remove">x</a>
    <h1>asd</h1>
    <textarea></textarea>
  </div>

Answer 1

使用 jQuery 的 .one()为 transitionend 事件附加一次性事件处理程序的方法。处理程序将在转换结束后删除元素。

$(document).on('click', '.remove', function() {  
  $(this).parent().one('transitionend', function() {
    $(this).remove();
  })
  .css({
    'transform': 'scale(0.5)'
  });
});

.planarea div {
  width: 225 px;
  height: 220 px;
  transition: transform .1s;
  background: #ffff00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="planarea">
  <div>
    <a class="remove">x</a>
    <h1>asd</h1>
    <textarea></textarea>
  </div>
</div>