使用CSS或JS / JQuery

Question

我有两个＆＃34;关于＆＃34;页面，并且在单击链接时想要向左和向右滚动。这是我的标记。

<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