javascript - 通过滑出并插入新元素来替换元素

Question

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

我到目前为止（http://jsfiddle.net/JqkyA/4/）：

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

问题是，当第二个表格滑入时，它的 x 位置是正确的，但它总是显示在原始表格的下方。我不希望这样 - 我希望第二个表格滑入与原始表格完全相同的 y 位置。

关于如何实现这一目标的任何想法？

编辑：

需要明确的是，我希望新表在与旧表相同的 y 坐标上滑入，但我仍然希望在滑出时显示旧表。我还想让新表格滑到旧表格旁边（如 wm.p1us 建议的那样，表格之间没有“暂停”）。

谢谢你的帮助。

Answer 1

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

Answer 2

我认为你应该采用不同的方法。无需滑动 2 个表格，只需使用负边距滑动其容器，然后使用完整回调隐藏第一个表格。

我还添加display: inline-block到两个表中。

像这样的东西：

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

看到这个工作演示

Answer 3

我已经分叉了你的JSFiddle

我添加了

<div class="inner">

作为内包装并将表格浮动到左侧。动画是通过改变margin-left第一个表来完成的。

这将按您的意愿工作 - 当第二张桌子进来时，第一张桌子仍然可见..

Answer 4

尝试这个，

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

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

让我知道它有用吗？