javascript - 使用 CSS 或 JS/JQuery 左右滑动两个页面

Question

我有两个“关于”页面，并且希望在单击链接时向左和向右滚动。这是我的标记。

<div id="about">
    <div id="about-1">
        <p>Content for about 1</p>
        <a href="#about-2">Slide to #about-2</a>
    </div>
    <div id="about-2">
        <p>Content for about 2</p>
        <a href="#about-1">Slide back to #about-1</a>
    </div>
</div>

我还用视觉表示了我想要的效果:

我对此很陌生，希望能得到一个尽可能简单的 CSS 解决方案，因为我不知道 JS/Jquery，但如果它是更简单的方法，那就这样吧。如果要求不是太多的话，我也希望它能够响应。 :) 帮忙，有人吗？谢谢!

Answer 1

您考虑过使用 JQuery UI 吗？

这是一个示例供您查看:

function transitionPage() {
    // Hide to left / show from left
    $("#about-1").toggle("slide", {direction: "left"}, 500);

    // Show from right / hide to right
    $("#about-2").toggle("slide", {direction: "right"}, 500);
}

$(document).ready(function() {
    $('#about-1').click(transitionPage);
    $('#about-2').click(transitionPage);
});

FIDDLE EXAMPLE