jQuery slideUp 和 slideDown 整个 <section>答案

【问题标题】：JQuery slideUp and slideDown the whole <section>jQuery slideUp 和 slideDown 整个 <section>
【发布时间】：2013-08-12 01:47:07
【问题描述】：

晚安，早上，下午……

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

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>

【问题讨论】：

标签： javascript jquery html slidedown slideup

【解决方案1】：

我是那个网站的开发者 :) 首先，感谢您以此为灵感！然后，要回答您的问题，正如 CP510 所说，您需要一个带有

的通用包装器

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

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

在该容器中，您将拥有所有部分

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

因为你必须为

scrollLeft/scrollTop

带有 jQuery 的容器的属性，并且使用 body 作为主要容器，我不得不处理一些 safari 的错误。另一个技巧是将您的部分视为打开的立方体的侧面。所以你的主要部分不会在

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;

其他部分以此类推。我希望我说得很清楚，我的英语不太好。如果您有任何其他问题，请随时提出！

【讨论】：

【解决方案2】：

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

下一个要求是这些部分绝对位于包装器中。这有点不稳定，但这是伪布局

<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 转换打开，所以移动是动画的。这些“导航类”中的每一个基本上都只规定了顶部和左侧位置属性。

【讨论】：

【解决方案3】：

看看这个 EXAMPLE 只是为了了解这个逻辑如何工作的基本概念。

这个例子有 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;
});

您也可以看看这个Website，因为它与您想要实现的目标非常相似

【讨论】：