Question

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

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

<强> See this working demo

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

让我知道它有用吗？。

通过将元素滑出并替换为新元素来替换元素

4 个答案: