0

基本的に、私は表を表示したいのですが、ユーザーがリンクをクリックすると、表が左にスライドし、別の表が右から元の表があった位置にスライドインします。

ここまで来ました ( http://jsfiddle.net/JqkyA/4/ ):

$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 } );
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });

問題は、2 番目のテーブルがスライドしている間、その x 位置は正しいのに、常に元のテーブルの下に表示されることです。私はそれを望んでいません-2番目のテーブルを元のテーブルとまったく同じy位置にスライドさせたいのです。

これを達成する方法についてのアイデアはありますか？

編集：

明確にするために、新しいテーブルを古いテーブルと同じ y 座標にスライドさせたいのですが、スライドアウト中に古いテーブルを表示したいのです。また、新しいテーブルを古いテーブルのすぐ隣にスライドさせたいと思います（wm.p1usが提案したように、テーブル間の「一時停止」はありません）。

助けてくれてありがとう。

4

4 に答える 4

2 
$( function() {
$( "a" ).click( function() {
            $( "table.grid-1" ).css({'position': 'absolute'});
    $( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 });

    $( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
    } );
 } );
于 2013-05-29T10:25:19.490 に答える
2

別のアプローチで行くべきだと思います。2 つのテーブルをスライドする代わりに、負のマージンを使用してコンテナーをスライドし、完全なコールバックを使用して最初のテーブルを非表示にします。

display: inline-blockまた、両方のテーブルに追加しました。

このようなもの：

$(".grids").animate({'margin-left': -110 }, 5000, function () {
     $('table.grid-1').hide();
     $(this).css("margin-left", 0);
});

この動作デモを見る

于 2013-05-29T10:34:17.603 に答える
0

これを試して、

$( function() {
    $( "a" ).click( function() {

        if($( "table.grid-1" ).css('display') != 'none')
        {
            $( "table.grid-1" ).hide();
        }  
        $( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
    } );
} );

それが有用かどうか教えてください。

于 2013-05-29T10:24:30.067 に答える