javascript - jQuery 延迟删除元素

Question

我有一个用于将内容复制到剪贴板的按钮列表(使用clipboard.js)。单击这些按钮之一时，我将使用 jQuery 在其旁边创建一个元素，该元素会展开以让用户知道它已成功复制到剪贴板。 我可以使用此功能，但我试图在元素进入和退出后将其删除，但到目前为止尚未成功。

使用 .delay(2000).remove(); 不起作用，因为我相信 .delay() 仅适用于动画。给元素一个类并使用 setTimeout() 确实有效，但是当单击多个按钮时，它会同时删除所有元素，这是不应该发生的 - 它们应该全部出现 2 秒然后消失.

这是主要代码 - 按钮是用 js 创建的，这就是使用 .live() 的原因。我不确定我提供的代码片段中缺少什么，但它可以在我的本地主机上运行(创建元素并对其进行动画处理) - 该元素在动画结束后需要将其删除。 (使用 Bootstrap 进行样式设置)

$(function() {
  new Clipboard('.btn-copy');
  
  $('button.btn-copy').live('click', function() {
    $(this).after($('<span/>').css({
        'overflow': 'hidden',
        'position': 'absolute',
        'transform': 'translate(-100%, -7px)',
        'width': '0',
        'color': '#fff',
        'background-color': '#5cb85c',
        'border': '1px solid #4cae4c',
        'border-radius': '4px',
        'padding': '7px 0px',
        'vertical-align': 'middle',
        '-webkit-user-select': 'none',
        '-moz-user-select': 'none',
        '-ms-user-select': 'none',
        'user-select': 'none'
      }).text('Link copied to clipboard').animate({
        'width': '180',
        'padding': '7px 12px'
      }, 200).delay(1000).animate({
        'width': '0',
        'padding': '7px 0px'
      }, 200)
      // .delay(2000).remove() // Remove <span/> element here
    );
  });
});

table {
  width: 100%;
}
.btn {
  color: white;
  background-color: #5cb85c;
  border: 1px solid #4cae4c;
  border-radius: 4px;
  padding: 7px 12px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>2...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>3...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
</table>

Answer 1

在动画成功回调中执行此操作并使用 setTimeOut() 提供延迟方法。虽然最好使用 on()而不是live()用于绑定(bind)事件处理程序，因为它在 jQuery 版本 1.7 中已被弃用。

.animate({
  'width': '0',
  'padding': '7px 0px'
}, 200, function() {
  setTimeout(function() {
    $ele.remove();
  }, 2000)
})

$(function() {
  // new Clipboard('.btn-copy');
  $('button.btn-copy').on('click', function() {
    var $ele = $('<span/>').css({
      'overflow': 'hidden',
      'position': 'absolute',
      'transform': 'translate(-100%, -7px)',
      'width': '0',
      'color': '#fff',
      'background-color': '#5cb85c',
      'border': '1px solid #4cae4c',
      'border-radius': '4px',
      'padding': '7px 0px',
      'vertical-align': 'middle',
      '-webkit-user-select': 'none',
      '-moz-user-select': 'none',
      '-ms-user-select': 'none',
      'user-select': 'none'
    }).text('Link copied to clipboard');
    $(this).after(
      $ele
      .animate({
        'width': '180',
        'padding': '7px 12px'
      }, 200)
      .delay(1000)
      .animate({
        'width': '0',
        'padding': '7px 0px'
      }, 200, function() {
        setTimeout(function() {
          $ele.remove();
        }, 2000)
      })
      .delay(2000)
      //			.remove() // Remove <span/> element here
    );
  });
});

table {
  width: 100%;
}
.btn {
  color: white;
  background-color: #5cb85c;
  border: 1px solid #4cae4c;
  border-radius: 4px;
  padding: 7px 12px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>2...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
  <tr>
    <td>3...</td>
    <td>
      <button data-clipboard-text="..." class="btn-copy btn btn-success">Copy</button>
    </td>
  </tr>
</table>