Question

我想用jQuery为桌面主体改变动画效果。

我有一张桌子：

<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的内容（只需更改带有单个加载器行的表行）。这是一个“ filter-loading ”类，它保存背景图像（是一个加载器图像）。

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

});

使用jQuery动画表正文更改

1 个答案: