CODEWITHSUNDEEP
jquery
JulianJ
JulianJ

Reputation: 1317

How to fade in new content with jQuery?

I have some jQuery that updates data in a table row. It all works perfectly but I'm now trying to figure out how to fade in the new updated table row. How can I fade in $("#row_"+num).html(data);

Thanks.

  $( "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;
    });

Upvotes: 0

Views: 490

Answers (1)

Red
Red

Reputation: 7299

You can not do a fade on the html() function. However, you could write a little workaround.

There are two solutions for this. A jQuery solution or a CSS solution.

jQuery solution:
What you want to do is to hide the tr first, before the new data gets added. Then after the data has been added, fadeIn() the 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 solution:
Create a CSS keyframe. Which animates a 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>

Upvotes: 1

Related Questions