如何用jQuery淡入新内容？

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

你不能做对html()功能fade。但是，您可以写一点解决方法。

有两种解决方案。 A 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解决方案：
创建CSSkeyframe。其中动画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>

[表行，当它在表中添加淡入淡出（指