0

我一直在 ASP.NET 项目中使用 jQuery，并且发现.fadeIn()andfadeOut()函数有一些奇怪的行为。在下面的示例中，单击按钮 (ID Button1) 应该会导致带有 ID 的文本范围和带有 IDLabel1的按钮TextBox1执行以下操作：

  • 消退
  • 将文本框的文本和文本范围更改为You clicked the button
  • 淡入

根据我使用的浏览器，我得到了 3 种不同的场景，并且每个元素在每种情况下的功能都不同。这是我实际单击按钮时发生的情况：

TextBox1：

  • 在 IE8 中，文本框淡出，更改文本，然后淡入
  • 在 IE8 兼容性视图中，文本框淡出，更改文本，然后淡入。但是，框中的文本看起来与单击按钮之前略有不同。
  • 在 FireFox 3.5.8 中，文本框不会淡出（但它会“暂停”淡出所花费的时间），确实会更改文本，然后似乎在淡入的地方再次“暂停” .

Label1：

  • 在 IE8 中，标签不会淡出（但它会“暂停”淡出所花费的时间），确实会更改文本，然后似乎在淡入的地方再次“暂停”。
  • 在 IE8 兼容性视图中，标签确实会淡出、更改文本并淡入，但文本看起来与单击按钮之前略有不同。
  • 在 FireFox 3.5.8 中，标签不会淡出（但它会在淡出所需的时间内“暂停”），确实会更改文本，然后似乎在淡入的地方再次“暂停”。

两个问题：

  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 回答