使用jQuery设置表体更改的动画

我想用jQuery设置表体TBody更改的动画

我有一张桌子：

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

我想在所有表行上实现一个简单的淡出效果，在加载器行上实现淡入效果。装载机行的高度将调整为300px

问题是，我无法更改内容……我尝试了“complete”函数，但即使在AJAX响应之后，加载程序行仍然保持不变。不带动画加载程序的行将替换为AJAX响应内容

提前感谢您的帮助。

试试看

css:

js:

var table='#filterTable tbody'；
变量加载器='#filterTable tbody.filter loading'；
$（“您的\u选择器”）。您的\u事件（函数（）{
$（表）。动画（{“不透明度”：0}，函数（）{
$（this.html（“”）
.find（“.filter加载”）
.css（“不透明度”，0）
.设置动画（{“不透明度”：1}）；
});                                  
$.ajax({
url：您的url，
成功：函数（数据）{
$（加载程序）。动画（{“不透明度”：0}，函数（）{
$（this.remove（）；
$（table.html（“您的数据行”）；
});                                      
},
错误：函数（xhr、状态、错误抛出）{
$（加载程序）。动画（{“不透明度”：0}，函数（）{
$（this.remove（）；
});                             
警惕（“抱歉”）；
}
});
});

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

                });

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

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

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

});