从左向右滑动切换滑块，点击一个显示/隐藏按钮

Question

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

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

1. 第4列看上去好像滑动从左至右
2. 覆盖模式DIV出现（如灯箱，shadowbox等），当我关闭模式窗口，然后再次点击显示/隐藏图像按钮时，第四列应该向左滑出，这将会有一个关闭按钮
3. 。

我写的代码正在为我工​​作，但它不会从第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

没有任何关于你的模式在你提供的代码。所以我跳过这部分。至于你的第四列切换，麻烦有两点：

1. 动画效果与块元素很好。 TD默认情况下不是阻止的。所以我在你的css规则中改为display: block;
2. slideToggle只能滑落。对于从左到右的幻灯片，您应该使用toggle以及适当的选项;

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