1

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() {

                });

ローダーは、アニメーションなしで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にサイズ変更されます。

問題は、コンテンツを変更できないことです...「complete」関数を試しましたが、AJAX応答後もローダー行が残っていました。アニメーションローダーがない場合、行はAJAX応答コンテンツに置き換えられます。

よろしくお願いします。

4

1 に答える 1

2

それを試してみてください

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

});
于 2012-06-26T19:02:01.353 に答える