使两个 div 从浏览器端向左/向右移动答案

【问题标题】：Make two divs shift left/right from browser end使两个 div 从浏览器端向左/向右移动
【发布时间】：2013-11-28 14:50:54
【问题描述】：

我已经在这个问题上摆弄了很长时间，希望你能帮上忙。我想要实现的是：

我有两个 div，一个红色和一个蓝色。红色默认可见，蓝色隐藏。它们的高度不同，但宽度相同。如果单击红色 div，它应该会滑到左侧并“滑出浏览器窗口”。同时，蓝色 div 应该来自右侧的浏览器，并滑入之前放置红色的空间。如果您然后单击蓝色 div，动画应该“反转”。

看起来很简单，但我想不通。我试过 jQuery 幻灯片和宽度，以及 jQuery UI 的幻灯片。问题通常是css定位。要么 div “跳跃”到位，所以动画很庞大。如果我使用 css 定位绝对/相对，则无法设置宽度，因此它们一直滑到浏览器的右/左端。相反，它们会在各自的宽度处被切断。

这张图片说明了我想要实现的目标。

真的希望你能帮忙:)

【问题讨论】：

请显示您目前拥有的 jquery 代码和标记

标签： jquery html css

【解决方案1】：

像这样非常简单的事情：

(function($){
    $(function() {
        var red = $('#red'),
            blue = $('#blue');

        red.click(function() {
            red.stop().animate({
                left: '-' + 0 - red.width() + 'px'
            }, 400);
            blue.stop().animate({
                left: '50%'
            }, 400);
        });

        blue.click(function() {
            blue.stop().animate({
                left: '150%'
            }, 400);
            red.stop().animate({
                left: '50%'
            }, 400);
        });
    });
})(jQuery);

Working fiddle

另一个想法是创建一个隐藏溢出的 div，您可以在 scrollLeft 中设置动画

【讨论】：

非常感谢您的回答。不过，我在定位方面仍然存在一些问题。请检查这个小提琴：jsfiddle.net/uJ2W8/1 我想让“红色和蓝色条”与徽标和文本所在的顶部布局对齐。关于屏幕尺寸和分辨率。使用绝对和相对时这有点困难:(
我想我现在可以正常工作了。我只需要找到页面宽度的一半，然后减去条的长度。然后我有他们的位置。但它有点乱，所以我想我得把它清理一下......无论如何，感谢您的大力帮助！ :)

【解决方案2】：

Here 是一个简单的 jQuery Slider 实现。希望能帮助到你。作为提示，您可以隐藏下一个/上一个按钮和寻呼机，对于“下一个”功能，您可以使用转到图像的 jQuery 选择器。

【讨论】：