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

Question

我已经在很长一段时间里摆弄这个了，我希望你能帮忙。 我想要实现的目标是：

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

似乎很简单，但我无法弄明白。我试过jQuery幻灯片和宽度，以及jQuery UI的幻灯片。问题往往是css定位。要么div'跳'到位，所以动画很笨重。如果我使用css定位绝对/相对，则不可能设置宽度，以便它们一直滑到浏览器的右/左端。相反，它们各自的宽度都会被切断。

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

真的希望你能提供帮助：）

Answer 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

中进行修改

Answer 2

Here是一个实现jQuery Slider的简单方法。希望能帮助到你。作为提示，您可以隐藏下一个/上一个按钮和寻呼机以及下一个＆＃39;您使用jQuery选择器的功能可以转移到您的图像。