Question

我有一个不寻常的问题。

以下代码无法正常运行。我已经将它粘贴到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>

Answer 1

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

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

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

中

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

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

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

1 个答案: