0

私は ASP.NET プロジェクトで jQuery を使用して遊んでおり、関数.fadeIn()とfadeOut()関数で奇妙な動作を見つけています。以下の例では、ボタン (ID Button1) をクリックすると、ID を持つテキストのスパンと IDLabel1を持つボタンの両方TextBox1が次のことを行うことになっています。

  • フェードアウト
  • テキスト ボックスとテキストのスパンの両方のテキストを次のように変更します。You clicked the button
  • フェードイン

私が使用しているブラウザに基づいて、3 つの異なるシナリオが得られ、各要素は状況ごとに異なって機能します。実際にボタンをクリックすると、次のようになります。

TextBox1:

  • IE8 では、テキスト ボックスがフェードアウトし、テキストが変更されてからフェードインします。
  • IE8 互換表示では、テキスト ボックスがフェードアウトし、テキストが変更されてからフェードインします。ただし、ボックス内のテキストは、ボタンをクリックする前とは少し異なって見えます。
  • FireFox 3.5.8 では、テキスト ボックスはフェードアウトせず (ただし、フェードにかかる時間だけ「一時停止」します)、テキストを変更し、フェードインする場所で再び「一時停止」したように見えます。 .

Label1:

  • IE8 では、ラベルはフェードアウトしません (ただし、フェードにかかる時間だけ「一時停止」します)、テキストを変更し、フェードインする場所で再び「一時停止」するように見えます。
  • IE8 互換表示では、ラベルがフェードアウトし、テキストが変更され、フェードインしますが、ボタンをクリックする前とはテキストが少し異なって見えます。
  • FireFox 3.5.8 では、ラベルはフェードアウトせず (ただし、フェードにかかる時間だけ「一時停止」します)、テキストを変更し、フェードインする場所で再び「一時停止」したように見えます。

2 つの質問:

  1. 各要素が異なるブラウザーで異なる動作をするようにするには、何が必要でしょうか?
  2. 複数のプラットフォームで探している機能を取得するためのより良い方法はありますか?

ファイルのソースコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#Button1").click(function(event) {
          $("#Label1").fadeOut("slow", function() {
            $(this).text("You clicked the button");            
            $(this).fadeIn("slow");
          });
          $("#TextBox1").fadeOut("slow", function() {
            $(this).val("You clicked the button").fadeIn("slow");            
            $(this).fadeIn("slow");
          });
          event.preventDefault();
        });
        $("a").click(function(event) {
          $("#Label1").text("You clicked the link");
          $("#TextBox1").val("You clicked the link");
          event.preventDefault();
        });
      });

    </script>

</head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTQwMjM5ODcyZGT6OfedWuFhLrSUyp+gwkCEueddvg==" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwK56uWtBwLs0bLrBgKM54rGBotkyyA5RRsPBGNaPTPCe7F5ARwv" />
</div>
    <div>

      <span id="Label1" style="color:#009900;">Type Something Here:</span>
&nbsp;
      <a href="http://www.google.com">This is a test Link</a>  
      <input name="TextBox1" type="text" value="test" id="TextBox1" style="width:258px;" />
      <br />
      <br />
      <input type="submit" name="Button1" value="Button" id="Button1" />

    </div>
    </form>
</body>
</html>
4

1 に答える 1

3

私は同じ問題を経験しました。それを修正するために、私はこれを試しましたが、うまくいきました。

それ以外の：

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

私が使用した：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Visual Studio のバージョンが本当に必要な場合は、別のバージョンを使用するか、別のソースから取得してみてください。

于 2010-04-07T18:19:49.237 に答える