取景器分割布局整页滑块效果

Question

我正在尝试构建一个拆分布局库，只有当用户点击按钮时才能完全显示图像。我设法将屏幕分成两部分并以完整尺寸显示图片，但我正在努力寻找一种有效的方法来实际显示图像的另一面而不需要调整大小。

这就是我现在所处的位置：

http://jsfiddle.net/Bb844/

我已经尝试过jQuery slideToggle（）方法，但它不会提供我正在寻找的结果。我们的想法不是将class="left"与class="right"重叠，而是将class="left" - 反之亦然 - 拖出取景器，其动画效果类似于{{1}方法。

应该通过slideToogle元素激活该功能。

有没有办法实现这个目标？

Answer 1

How does this look？

我稍微更改了您的HTML并使您的CSS适合新的HTML设置。唯一需要注意的是jQuery设置在需要的位置，.side .square正在影响直接 {{ 1}}。然后我使用以下内容来执行您正在寻找的滑动动作

.square