时间戳

首页 > 解决方案 > 一个函数中有两件事，其中一个必须等​​待

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

问题描述

我想在一个函数中完成两件事，我想首先将比例变为 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>

标签： jquerycss

解决方案

使用 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>

推荐阅读