单击显示/隐藏按钮，从左到右切换幻灯片，平滑移动

Question

我有一个包含 4 列和 10 行的表，默认情况下隐藏第 4 列。 第一行有一个显示/隐藏图像按钮。

我需要的是，当我点击显示/隐藏图像按钮时：

1. 第 4 列看起来好像从左到右滑入
2. 要显示的模态覆盖 div（如灯箱、阴影箱等），将有一个关闭按钮
3. 当我关闭模态窗口，然后再次单击显示/隐藏图像按钮时，第 4 列应该向左滑出。

我编写的代码对我有用，但它不会从第 3 列向右滑入并在再次单击时滑回。当我单击显示/隐藏按钮时，模态覆盖也不起作用。 需要一些帮助来解决这个问题。

这是我的代码：

.subtn{
display:inline-block;
background:url("images/next_right.png") right 0px no-repeat;
width:16px;
height:16px;
}
.subtn.expanded{
background:url("images/previous_left.png") right 0px no-repeat;
width:16px;
height:16px;
}




$(document).ready(function(){
  var $content = $("td:nth-child(4)").hide();
  $(".subtn").on("click", function(e){
    $(this).toggleClass("expanded");
    $content.slideToggle();
  });
});



<table>
<tr>
        <td colspan="4" align="right"><a href="#" rel="lightbox" class="subtn"></a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>sam</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>7</td>
        <td>john</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bob</td>
        <td>africa</td>
        <td style="display:none;">new</td>
    </tr>

</table>

JS FIDDLE LINK

Answer 1

在您提供的代码中没有关于您的模式的任何内容。所以我跳过这部分。在您的第 4 列切换时，问题在于两点：

1. 动画与块元素配合得很好。 TD 默认不被屏蔽。所以我在你的css规则里把它改成了display: block；
2. slideToggle 只能向下滑动。对于从左到右和向后滑动，您应该使用 toggle 和适当的选项；

在您提供的 jsFiddle 中，没有应该运行切换过程的按钮。我添加了它。 Anthing在这里工作： http://jsfiddle.net/pEKvq/7/