jquery - 使用 jQuery 动画表体变化

Question

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

我有一张桌子：

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

TBody 改用 AJAX，所以我有一个加载器：

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

                });

Loader 仅更改 TBody 的内容，没有动画（仅更改具有单个 loader 行的表行）。这是一个“过滤器加载”类，它包含背景图像（是加载器图像）。

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

我想在所有表格行上实现简单的淡出效果并在加载器行上淡入。加载程序行的高度调整为 300px。

问题是我无法更改内容...我已经尝试过“完整”功能，但即使在 AJAX 响应之后加载程序行仍然存在。没有动画加载器行被 AJAX 响应内容替换。

提前感谢您的帮助。

Answer 1

试试看

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

});