Question

我正在为我正在建设的婚礼RSVP网站提供以下HTML：

<!doctype html>
<html>
    <head>
        <title>Amy and Scott's Wedding - RSVP Page</title>
        <link href="http://www.asjwedding.com/style/base.css" rel="stylesheet">
        <link href="http://www.asjwedding.com/style/user.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://www.asjwedding.com/script/formControl.js"></script>

    </head>
    <body>
        <div id="doc">
            <div id="content">
                <div class="text-content">
                    <h1>Welcome!</h1>
                    <div class="question">
                        ... omitted for brevity ...
                                        <div id="messageArea" class="response">
                                        </div>
                                        <div class="submitButton">
                      <input type="submit" value="Submit" onclick="validateForm();">
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

而且，我使用jQuery有以下javascript：

function hideMessage() {
  alert("Fading...");
  $("#messageArea").fadeOut();
}

但是，由于某些原因，褪色不起作用，我不知道为什么。如果我在hideMessage（）中执行hide（），它可以正常工作，但如果我使用fadeOut（），则没有任何反应。（实际上，这不是真的......它确实给了我警报，但它实际上并没有褪色）。

我在Linux上使用Firefox Nightly（14.0），但Android上的Firefox Nightly实际上确实工作......我不完全确定为什么它不能在桌面上工作。

有人可以帮助我吗？

编辑：

我有其他javascript函数的一些代码：

function validateForm() {
  // Verify at least one of the rsvp options is selected.
  if (!$("#radNone").attr("checked") &&
      !$("#radWedding").attr("checked") &&
      !$("#radReception").attr("checked") &&
      !$("#radBoth").attr("checked")) {
     sendMessage("Please choose one of the RSVP options.");
        return;
  }
}

function hideMessage() {
  alert("Fading...");
  $("#messageArea").fadeOut();
}

function sendNegativeMessage(message) {
  $("#messageArea").css('background-color', '#FF6666');
  $("#messageArea").html(message);
  $("#messageArea").show();
}

function sendMessage(message, type) {
  setTimeout(hideMessage, 1000);

  $('#messageArea').css('opacity', '1.0');
  // Type can be 'positive', 'negative.
  if (!type) {
    // Assume it's negative.
    sendNegativeMessage(message);
  }
}

Answer 1

您需要确保在加载DOM后调用它（否则警报将正确触发，但DOM元素将不存在，当您尝试操作它时会导致问题）。试试这个：

function hideMessage() {
    alert("Fading...");
        $("#messageArea").fadeOut();
    }

$(function() {
    hideMessage();
});

Answer 2

嗯...很奇怪，但现在看起来工作得很好。我实际上没有改变任何东西（我知道人们会这样说，但在这种情况下，甚至文件的时间戳都是在我提出问题之前）。

我一定在看旧版本的网站......或者其他什么......

jQuery FadeOut（）函数在FF中没有做任何事情

2 个答案: