jquery - 让两个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

另一个想法是创建一个 overflow hidden 的div，您可以在scrollLeft中设置动画