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

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

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

第四列显示为从左向右滑动

要显示的模式叠加div（如lightbox、shadowbox等）将具有关闭按钮

当我关闭模式窗口，然后再次单击“显示/隐藏图像”按钮时，第4列应该滑出到左侧

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

这是我的代码：

.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>

.subtn{
显示：内联块；
背景：url（“images/next_right.png”）右0px无重复；
宽度：16px；
高度：16px；
}
.子项{
背景：url（“images/previous_left.png”）右0px不重复；
宽度：16px；
高度：16px；
}
$（文档）.ready（函数（）{
var$content=$（“td:n子项（4）”）.hide（）；
$（“.subtn”）。在（“单击”上，函数（e）{
$（this.toggleClass（“扩展”）；
$content.slideToggle（）；
});
});
1.
山姆
欧洲
新的
7.
厕所
欧洲
新的
4.
上下快速移动
非洲
新的

---

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

动画适用于块元素<默认情况下，code>TD不是块。所以我在css规则中将它改为

display:block

slideToggle

只是向下滑动。对于从左到右和从后滑动，您应该使用带有适当选项的

切换

在您提供的JSFIDLE中，并没有应该运行切换过程的按钮。我加上去了。安兴在这里工作：

---

请在JSFIDLE上模拟相同的情况：）您在问题中提到的内容看起来与小提琴中的内容不同。阿加尼已经更新了小提琴链接。请现在检查一下。在表格的第一行中，当我单击时（图像未上载，但可单击），第四行显示，但模式窗口未显示，第四窗口未向右滑动。请帮忙。非常感谢你抽出时间。这真的帮了大忙。@guyan可以接受并投票支持我的答案，让它对其他人有帮助；）