この例では jQuery fadeIn() と fadeOut() が奇妙に見えるのはなぜですか?

StackOverflow https://stackoverflow.com/questions/2594759

質問

ASP.NET プロジェクトで jQuery を使って遊んでいるのですが、 .fadeIn() そして fadeOut() 機能。以下の例では、ボタン (ID) をクリックします。 Button1) は、ID を持つテキストの両方のスパンを引き起こすことになっています Label1 ID のボタン 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>
役に立ちましたか？

解決

私も同じ問題を経験しました。それを修正するために、これを試してみたところ、うまくいきました。

の代わりに：

<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 バージョンが本当に必要な場合は、別のバージョンを使用するか、別のソースから入手してみてください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top