JQuery slideUp和slideDown the slideDown <section>

Question

晚安早安下午..。

我正在开发一个网站，整个内容上下滑动.我想了很多可能性，但仍然找不到答案。注意，索引/intro/主页是第二节。我的灵感是：

http://www.pulpdesign.it/

谢谢，提前。

<section class="tips-content">
        </section>

        <section id="intro">
            <h1 id="intro-logo">bla</h1>
                <span id="title">blabla</span>
                <nav id="navigation">
                    <a href="#" id="go_curriculum"><span class="curriculum"></span><span id="curriculum">currículo</span></a>
                    <a href="#" id="go_contact"><span id="contact">agendamento</span><span class="contact"></span></a>
                    <a href="#" id="go_services"><span id="services">serviços</span><span class="services"></span></a>
                    <a href="#" id="go_tips"><span id="tips">dicas</span><span class="tips"></span></a>
                </nav>
        </section>

        <section id="curriculum-content">
            <div style="height:100%; background:red;">
            </div>
        </section>

        <script>
            $(document).ready(function(){


                $("#go_curriculum").click(function(){
                    $(".tips-content").slideDown("slow");
                });

                $("#go_tips").click(function(){

                    $("#curriculum-content").slideUp("slow");


                });

            });
        </script>
</body>

​

Answer 1

我是写那个网站的开发人员:)首先，谢谢你把它作为灵感！然后，要回答您的问题，您需要，正如CP510所说的，一个通用的包装器

overflow:hidden; height: 100%; width: 100%

我使用了body标签，这实际上不是最好的选择，最好使用

在那个容器里，你会有你所有的部分

position: absolute;
width: 100%;
height: 100%;

因为你必须让

scrollLeft/scrollTop

带有jQuery的容器的属性，并使用主体作为主容器，我不得不处理safari的一些bug。另一个窍门是把你的部分想象成一个打开的立方体的侧面。所以你的主要部分不会在

top: 0; left: 0

但在

top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;

其他部分也是如此。我希望我说得很清楚，我的英语不太好。如果你还有其他问题，就问吧！

Answer 2

看看这个示例，只为了了解这个逻辑是如何工作的基本思想。

这个例子有3x2个完整的页面div(总共6页)，我们根本没有使用任何JavaScript，它都是CSS和HTML。

请注意，为了从页面中删除滚动条，您需要在正文样式中取消下面的注释。

body {
    white-space: nowrap;
    /*overflow:hidden;   UNCOMMENT THIS*/
}

光滑动画的jQuery

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

您还可以查看此网站，因为它非常类似于您想要实现的目标。

Answer 3

这是个棘手的问题。但我已经做到了。其基本思想是使用原始的$().animate()函数来移动所有这些有趣的东西。因为幻灯片向上/向下只是用于此的辅助函数。

下一个要求是，这些部分绝对位于包装器中。有点摇摇晃晃，但这是psuedo的布局

<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
   <DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
       <CONTENT DIVS POSITIONED CORRECTLY>
   </DIV>
<DIV>

现在，您要做的是移动绝对定位的内容容器(第二个div)，使用jquery显示该节。

$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);

现在，POSITION_TOP和POSITION_LEFT占位符可以是根据点击的导航按钮设置的变量。如果您希望文档到达该位置时发生某些事情，则cleanup_callback是一个可选函数。

这就是jQuery的方式。有一种使用类和转换的CSS方式。它的工作方式是将持有容器类更改为基本上声明目标页面所在的位置，然后因为CSS转换已经启动，所以移动是动态的。这些“导航类”中的每一个基本上只是指定顶部和左边的位置属性。