如何一次更改背景和淡出表格行

时间:2017-07-02 16:59:56

标签: jquery

当我删除记录时,我希望该行变为红色然后淡出。我不能让它变红或淡出,而不是两者兼而有之。我似乎无法在不输入更多文字的情况下发帖。



$(document).ready(function() {
  $("body").on('click', ".delete-btn", function() {
    var id = $(this).data('id');
    var tr = $(this).closest('tr');

    $.ajax({
      url: 'functions/delete-article.php',
      method: 'POST',
      data: {
        id: id
      },
      success: function(response) {
        if (response = "success") {
          tr.css('background', 'tomato', function() {});
        }
      },
    });
  });

  $.ajax({
    url: 'functions/list-articles-delete.php',
    dataType: 'json',
    method: 'POST',
    success: function(data) {
      $.each(data, function(item) {
        var tr_str = "<tr>" +
          "<td>" + data[item].n_title + "</td>" +
          "<td>" + data[item].n_dateTime + "</td>" +
          "<td><button class='btn btn-danger delete-btn' data-id='" + data[item].id + "'>Delete</button></td>";
        $("#output").append(tr_str);
      });
    },
  });
});
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您可以在此处使用.delay()来延迟点击之后的fadeOut()

&#13;
&#13;
$('tr').on('click', function(e) {
  e.preventDefault();
  
  $(this).find('td').css('background', 'tomato').delay(1000).fadeOut('slow');
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Test</td>
  </tr>
</table>
&#13;
&#13;
&#13;

在这里,点击tr元素后(您可以在此处更改选择器),我们更改元素的background,在我们fadeOut之前我们将其延迟第二