在此特定示例中，slideUp 无法正常工作答案

【问题标题】：slideUp is not working correctly in this particular example在此特定示例中，slideUp 无法正常工作
【发布时间】：2012-11-20 19:32:04
【问题描述】：

我有一个不寻常的问题。

下面的代码不能正常工作。我已将它粘贴到 jsFiddle 中，它工作正常，但是在我的网站上它运行不顺畅，而且看起来也不怎么好。它应该做什么：点击“从这里开始”按钮后，它应该平滑地向上滑动整个内容，然后进入下一页。它实际上开始向上滑动，但它没有走到尽头并加载一个新页面。我认为它可以通过使用任何延迟来修复，但我是 jQuery 的新手，我不知道如何正确地做到这一点。或者也许有另一种方法来解决它。（问题已解决，原因：应用了最小高度）

我面临的下一个问题是加载外部 .js 文件（代码中的注释片段）。当我这样做时，脚本不起作用。当我将脚本放在按钮下方时，它可以工作。如何克服这个问题，我可以将代码实现为头部中的外部 .js，而不是将其放在按钮下方的标签中？

非常感谢您。

代码在这里：

    <html>
    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=480" />
        <link rel="stylesheet" type="text/css" href="_css/index.css">
        <script type="text/javascript" src="_js/jquery.js"></script>
        <script type="text/javascript" src="_js/form.js"></script>
    <!--            <script type="text/javascript" src="_js/transitions.js"></script>
    -->
    </head>

    <body>

    <div id="wrapper">

      <div id="header">
            <img src="_images/header.png">
            <div id="spons"><img src="_images/main-sponsor.jpg"></div>
      </div>

      <div id="content">

        <div id="starthere">
                <strong>Thank you. <br/>You have gained access to free Wi-Fi Media Network. <br/>Please enjoy free content from GAME.</strong>
            <div id="finalbut">
                <a href="#" id="roll"><img src="_images/butt-start.png"></a>
            </div>

            <script>
            $("#roll").click(function() {
                 $("#content").slideUp(function() {
                     window.location.href = "menu.html";
                 });
            });
            </script>

        </div>

      </div>

    </div>

    </body>
    </html>

【问题讨论】：

我可以在这里只放一些代码片段，但我可能会错过一些重要的东西，这可能是代码不能完全工作的原因。是内容量的问题还是其他的问题？任何想法将不胜感激。谢谢

标签： jquery html slideup

【解决方案1】：

您的内容 div 有一个 min-height，这会搞砸动画。

您可以简单地删除最小高度

对于您的问题的第二部分，将代码包装在 jQuery on ready event 中。

在使用 jQuery 时总是这样做！它会确保在一切准备就绪后运行您的代码，因此您可以将代码放在任何地方。

$(function() {
    $("#roll").click(function() {
        $("#content").slideUp(function() {
            window.location.href = "menu.html";
        });
    });
});

【讨论】：

多么棒的地方！！谢谢 :) 那是问题所在。对问题 2 有任何想法吗？为什么我不能放置外部 .js 文件的链接（在代码中注释）？
我已经更正了 CSS，它现在运行良好。十分感谢。现在最后一个问题是
完美。太好了，谢谢@StephenSarcsamKamenar