CODEWITHSUNDEEP
jqueryjquery-animate
peter.o
peter.o

Reputation: 3530

Animate table body change with jQuery

I'd like to animate table body TBody change with jQuery.

I have a table:

<table id="filterTable">
  <tbody>
    <td>name</td>
    <td>surname</td>
  </tbody>
</table>

TBody is changed usign AJAX, so I have a loader:

$('#filterTable tbody')
  .ajaxStart(function() {
     $(this).html('<tr class="filter-loading"><td colspan="5">&nbsp;</td></tr>');
                })
  .ajaxStop(function() {

                });

Loader only changes the content of TBody without animation (Just changes table rows with single loader row). The is a class "filter-loading" which holds background image (is a loader image).

.filter-loading {
    height: 300px;
}
.filter-loading td {
    background: url(../images/loading-small.gif) #ffffff no-repeat 18px 18px; 
    background-position: center;
}

I'd like to achieve a simple fade out effect on all table rows and fade in on loader row. And loader row's height to be resized to 300px.

The problem is that I can't change content...I've tried the "complete" function, but the loader row stayed even after AJAX response. Without animation loader row is replaced with AJAX response content.

Thanks for help in advance.

Upvotes: 1

Views: 2488

Answers (1)

see613
see613

Reputation: 494

try it

css:

#filterTable {
    display:block; // for animation - important(tables not animated)
}

js:

var table  = '#filterTable tbody';
var loader = '#filterTable tbody .filter-loading';    

$("your_selector").your_event(function() {    

    $(table).animate({"opacity": 0}, function() {
        $(this).html('<tr class="filter-loading"><td colspan="5">&nbsp;</td></tr>')
               .find(".filter-loading")
               .css("opacity", 0)
               .animate({"opacity": 1});  
    });                                  

    $.ajax({
        url: your_url,

        success: function(data) {   
            $(loader).animate({"opacity": 0}, function() {
                $(this).remove();
                $(table).html("your data rows");  
            });                                      
        },
        error: function(xhr, status, errorThrown) {
            $(loader).animate({"opacity": 0}, function() {
                $(this).remove();
            });                             

            alert("sorry");
        }
    });

});

Upvotes: 2

Related Questions