5

jQueryでテーブル列の開閉をアニメーション化するにはどうすればよいですか？

私は現在このコードを持っています：

jQuery(function($){
    $(".togglebutton").click(function(e){
        if (cost_visible) {
            $(".numbers").animate({width: 80}, 1500);
            $(".costs").animate({width: 0}, 1500);

        } else {
            $(".numbers").animate({width: 0}, 1500);
            $(".costs").animate({width: 60}, 1500);
        }
    });
});

そして、標準のTABLE / TR / TH / TDタグを含むHTMLと、開いたり閉じたりする必要があるものを識別するために使用されるクラス名を持つTHタグとTDタグが含まれています。

問題は、jQueryがテーブルに触れた後、影響を受けたセルが、きちんと並んでいるのではなく、お互いの上に積み重ねる必要性を突然感じていることだと思われます。

これは、jQueryが「テーブルのように」表示される要素ではなく、「ブロック」要素のみをアニメーション化できることに関係していると思います。では、ブロック要素からテーブルを作成できますか？または、テーブルのような要素をアニメーション化する別の方法はありますか？この提案された解決策を見つけましたが、アニメーションのためだけにすべてのテーブル要素をDIVに含めるのは面倒なようです...

4

4 に答える 4

5

いくつかの研究の後、私はそれを見つけました...

  • この問題は、jQueryによってアニメーションのアイテムを「表示：ブロック」するように設定されているTHアイテムとTDアイテムが原因で発生します。現在のところ、jQueryの動作を変える方法はありません。
  • THおよびTDアイテムをDIVタグで囲むことは機能しません。一部のグーグル検索では、TABLE構造内でDIVタグを使用するとHTMLが無効になるという提案が表示されます。
  • THおよびTDアイテムのコンテンツをDIVタグで囲むことは機能せず、コンテンツはアニメーションの後にフロートし始め、THおよびTDアイテム内に留まりません。
  • 同じ記事は、テーブル内のTBODYセクションを使用して、テーブル行の開閉をアニメーション化できることを示しています。

私は私が望んでいたことを成功させました、そしてここに方法があります：

  • テーブルを、表示および非表示にする列グループで構成されるいくつかのサブテーブルに分割します。
  • これらのサブテーブルをDIVタグで囲み、並べてフロートしました。
  • jQueryを使用してこれらのDIVを表示/非表示にしました。

これが誰にでも役立つことを願っています。よりエレガントな解決策が見つかった場合は、メッセージを残してください。

于 2010-01-18T12:11:19.523 に答える
3

同じ効果ではありませんが、fadeIn（）メソッドとfadeOut（）jQueryメソッドはテーブルで正しく機能します。show（）メソッドとhide（）メソッド（アニメーションなし）も機能します。

于 2011-01-05T16:20:27.830 に答える
0

記念日おめでとう。

1月がテーブルスライディング効果の時間であるように見えるのは奇妙です。私はそれが仕事に戻って楽になると思いますねえ:)しかし、私はなんとかサイドウェイ列崩壊効果を作成することができました。

$(table).each(...
    var columnNo = $(cell).index();
    $('div', cell).animate({ width: '0px' }, 'slow');
    $(cell).closest("table")
        .find("tr td:nth-child(" + (columnNo + 1) + ") div")
        .animate({ width: '0px' }, 'slow')
...)

基本的に、これはdivを使用した回避策です。cellそれぞれの「th」を選択してから、その列にある1つおきのセルを見つけます。そしてprogressivluは、アニメーションを使用して各divピクセルサイズを縮小します。占有スペースが変化しているため、テーブルはHTML仕様に従って再計算されます。完了したら、列を非表示にして「非表示」にすることができます

ページの読み込み時やボタンをクリックした後など、すべてをdivでラップするスクリプト。フォームの送信や他のスクリプトが混乱した場合に備えて、アニメーションの完了後にdivを削除することもできます。

 $('#Stupid_RadGrid th').each(function () {
          $(this).wrapInner("<div></div>"); 
 });
 $('#Stupid_RadGrid td').each(function () {
         $(this).wrapInner("<div></div>");
 });

両方の方法で機能するようになったら、更新します。

于 2015-01-13T15:40:21.560 に答える
0

私の解決策は、divオーバーレイを使用することです。アニメーションはこのdivオーバーレイで実行されますが、テーブル要素は変更されません。

ここにデモがあります。

JS：

$("div").css("width", $("table").width() + 10); //10px of margin
$("div").css("height", $("table").height() + 10); //10px of margin

$("#show").click( function(){
    $("div").animate({
        left: $("div").width()
    }, function (){
    $("div").hide();
    });
});

$("#hide").click( function() {
    $("div").show( "fast", function (){
        $("div").animate({ left: "0px" });
    });
});
于 2015-09-09T09:24:14.997 に答える