0

我有一个不寻常的问题。

下面的代码不能正常工作。我已将它粘贴到 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>
4

1 回答 1

2

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

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

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

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

$(function() {
    $("#roll").click(function() {
        $("#content").slideUp(function() {
            window.location.href = "menu.html";
        });
    });
});
于 2012-11-20T19:37:43.100 回答