Question

我有一些jQuery更新表格行中的数据。这一切都很完美，但我现在正试图弄清楚如何淡入新的更新表行。如何淡入$("#row_"+num).html(data);

感谢。

  $( "form" ).submit(function (e) {
      e.preventDefault();
            // Get the submit button element
            var btn = $(this).find("button").attr("id");//Find button ID
            var num=btn.slice(3,this.id.length); //Get Unique ID for form 

            var formdata = $("#edit_credit"+num).serialize();//Submit correct form by adding unique id
            $.post('update_credit.php', formdata,
               function(data){
            console.log(data); 
          $(".panel-collapse").collapse("hide");//hide accordian
           $("#row_"+num).html(data);//Replace data in row

        });
            return false;
    });

Answer 1

您无法在fade功能上执行html()。但是，你可以写一些解决方法。

有两种解决方案。 jQuery解决方案或CSS解决方案。

jQuery解决方案：
您要做的是在添加新数据之前先hide tr fadeIn()。然后，在添加数据后，tr $(document).ready( function() { var btn = $("#add"); var data = "<td>I am the replaced data, oh and i fade in aswell!</td>"; btn.click( function() { var tr = $("#table tr"); tr.hide(); // First hide the original table-row tr.html(data); // When its hidden, add the new data tr.fadeIn(300); // Then fade the table row in with the new data }); });。

table, table tr, table td {
  width: 100%;
}

table tr td {
  border: 1px solid #ccc;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td>I am some sample data :)</td>
  </tr>
</table>

<button id="add">Replace `I am some sample data :)`</button>

CSS

CSS解决方案：
创建keyframe fadeIn。其动画为$(document).ready( function() { var btn = $("#add"); var data = "<td>I am the replaced data, oh and i fade in aswell!</td>"; btn.click( function() { var tr = $("#table tr"); tr.addClass("fadeIn"); // Append to fadeIn class. tr.html(data); // When its hidden, add the new data }); });。

table, table tr, table td {
  width: 100%;
}

table tr td {
  border: 1px solid #ccc;
  padding: 15px;
}

table tr.fadeIn {
  animation: fade-in .5s forwards;
}

@keyframes fade-in {
  from {opacity: 0;}
  to {opacity: 1;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td>I am some sample data :)</td>
  </tr>
</table>

<button id="add">Replace `I am some sample data :)`</button>

"b"

如何使用jQuery淡出新内容？

1 个答案: