Javascript 通过滑出和滑入新元件来更换元件

基本上，我想显示一个表，当用户单击一个链接时，我希望该表向左滑动，另一个表从右滑动到原始表所在的位置

我已经走了这么远（）：

问题是，当第二张桌子滑入时，其x位置正确，但始终显示在原始桌子下方。我不想这样-我想让第二张桌子在与原始桌子完全相同的y位置滑入

关于如何实现这一点有什么想法吗

编辑：

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

为了清楚起见，我希望新表在与旧表相同的y坐标上滑入，但我仍然希望在滑出期间显示旧表。我还想让新表滑到旧表的旁边（如wm.p1us所建议的，表之间没有“暂停”）

谢谢你的帮助。

试试这个

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

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

让我知道它有用吗？

试试这个

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

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

$( 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 });
    } );
 } );

让我知道它有用吗？

我已经用叉子叉了你的

$( 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 });
    } );
 } );

我补充说

<div class="inner">

作为一个内部包装器，并将表格向左浮动。通过更改第一个表的

左边距

，可以完成动画

这将根据您的需要工作-当第二个表出现时，第一个表仍然可见。

我已将您的

我补充说

<div class="inner">

作为一个内部包装器，并将表格向左浮动。通过更改第一个表的

左边距

，可以完成动画

---

这将根据您的需要工作-当第二个表出现时，第一个表仍然可见。

我认为您应该使用不同的方法。 与其滑动这两个表，不如使用负边距滑动它们的容器，然后使用完整回调隐藏第一个表

我还向这两个表添加了

display:inline block

类似这样的内容：

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

---

我认为你应该采用不同的方法。 与其滑动这两个表，不如使用负边距滑动它们的容器，然后使用完整回调隐藏第一个表

我还向这两个表添加了

display:inline block

类似这样的内容：

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

---

我已经尝试过这种方法，这里的问题是，我仍然希望在滑出期间显示原始表。我已经尝试过这种方法，这里的问题是，我仍然希望在滑出期间显示原始表。我也尝试过这种方法，但是，我的实际表要宽得多，如果在滑出旧桌子和滑入新桌子之间没有“停顿”，那就更好了。我将编辑我的问题以使其更清楚。哦，很好的一个问题，我喜欢它，因为我不必修改css。我也尝试过这个问题，但是，我的实际表格要宽得多，如果在滑出旧表格和滑入新表格之间没有“暂停”会更好。我会编辑我的问题，让它更清楚。哦，不错，我喜欢它，因为我不需要修改css。嗯，这是个不错的主意。我现在换了这个方法，因为它对我来说似乎是最干净的。嗯，这是个不错的主意。我现在换了这个方法，因为它对我来说似乎是最干净的。