单击滑动效果移动div？ jQuery的

Question

我使用CSS3进行了快速测试，以创建一个滑动选项卡的想法。这可以在这里看到：

LINK

这是非常黑的，因为我不知道如何正确地做到这一点。 （悬停在选项卡上的选项卡的z-index会发生变化，以便可以看到其他选项卡）

事情是我想以一种可以在所有浏览器中运行的方式来实现这一点，并且具有这种效果。那可能吗？谢谢你的时间！

可以在页面上查看HTML，可以查看CSS here.

Answer 1

要在所有浏览器中工作有很多问题，但要使用jQuery在大多数主流桌面浏览器中运行效果会是这样的：

演示： jsfiddle.net/Marcel/CKt58（fullscreen）

使用可点击的标签关闭面板：

演示： jsfiddle.net/Marcel/CKt58/1（fullscreen）

Answer 2

从可用性的角度来看，我建议在滑出时将所有4个标签移到右侧。这样可以更轻松地在标签之间切换。此外，这将非常容易编码，你根本不需要摆弄z索引。

Answer 3

使用jquery的animate（）函数，操纵左侧prop。它将跨浏览器工作，如下所示：

http://jsfiddle.net/jackJoe/u4sCp/embedded/result/

这是小提琴：http://jsfiddle.net/jackJoe/u4sCp/

现在，这需要更多的工作，交换标签+计算宽度（左）我不知道你是否打算将它滑到屏幕的整个宽度等等......