0

私が構築している結婚式の 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);
  }
}
4

2 に答える 2

1

DOM がロードされた後に呼び出されていることを確認する必要があります (そうしないと、アラートは正しく発生しますが、DOM 要素が存在しないため、操作しようとしたときに問題が発生します)。これを試して：

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

$(function() {
    hideMessage();
});
于 2012-04-16T02:44:20.890 に答える
0

うーん...奇妙ですが、今ではうまく機能しているようです。私は実際には何も変更していません (人々がそのようなことを言っていることは知っていますが、この場合、ファイルのタイムスタンプでさえ私が質問する前のものです)。

古いバージョンのサイトを見ていたに違いない... か何か...

于 2012-04-16T05:41:13.273 に答える