如何用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>

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