Javascript 为什么在这个例子中jQuery fadeIn（）和fadeOut（）看起来很奇怪？_Javascript_Jquery_Html_Cross Browser_Fadein

Javascript 为什么在这个例子中jQuery fadeIn（）和fadeOut（）看起来很奇怪？

javascript jquery html

Javascript 为什么在这个例子中jQuery fadeIn（）和fadeOut（）看起来很奇怪？,javascript,jquery,html,cross-browser,fadein,Javascript,Jquery,Html,Cross Browser,Fadein,我一直在ASP.NET项目中使用jQuery，发现.fadeIn（）和fadeOut（）函数有一些奇怪的行为。在下面的示例中，单击按钮（IDButton1）可以使IDLabel1的文本范围和IDTextBox1的按钮执行以下操作：淡出将文本框的文本和文本范围更改为单击按钮后的淡入根据我使用的浏览器，我得到了3种不同的场景，每个元素在每种情况下的功能不同。下面是我实际单击按钮时发生的情况： TextBox1：在IE8中，文本框淡出，更改文本，然后淡入在IE8兼容性视图中，文本框淡

我一直在ASP.NET项目中使用jQuery，发现

.fadeIn（）

和

fadeOut（）函数有一些奇怪的行为。在下面的示例中，单击按钮（IDButton1
）可以使IDLabel1
的文本范围和IDTextBox1
的按钮执行以下操作：

淡出
将文本框的文本和文本范围更改为单击按钮后的

淡入

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

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

标签1
：

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

在FireFox 3.5.8中，标签不会淡出（但它会“暂停”淡出所需的时间），会改变文本，然后似乎会在淡出的地方再次“暂停”

两个问题：
是什么让每个元素在不同的浏览器中表现出不同的行为
有没有更好的方法可以跨多个平台获得我想要的功能

以下是该文件的源代码：
<!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>


$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（事件）{
$（“#Label1”）.fadeOut（“慢”，函数（）{
$（this）.text（“您单击了按钮”）；
美元（这个）.fadeIn（“慢”）；
});
$（“#TextBox1”）.fadeOut（“慢”，函数（）{
$（this.val（“您单击了按钮”）.fadeIn（“慢”）；
美元（这个）.fadeIn（“慢”）；
});
event.preventDefault（）；
});
$（“a”）。单击（函数（事件）{
$（“#标签1”）.text（“您单击了链接”）；
$（“#TextBox1”）.val（“您单击了链接”）；
event.preventDefault（）；
});
});
在此处键入内容：




我也遇到了同样的问题。为了解决这个问题，我尝试了这个方法，效果很好
而不是：
<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>



我用过：
<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版本，请尝试使用其他版本或从其他来源获取它。
我也遇到过同样的问题。为了解决这个问题，我尝试了这个方法，效果很好
而不是：
<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>



我用过：
<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版本，请尝试使用其他版本或从其他来源获取它。
这太奇怪了。使用jQuery1.4.2可以让它与FireFox一起工作，但它仍然不能与IE8一起工作。谢谢你的建议。删除IE7兼容性标签，这将修复它，使其与此版本的jQuery一起工作。（在头上）@Ben McCormack，真的很奇怪。Visual Studio挫折感！这太奇怪了。使用jQuery1.4.2可以让它与FireFox一起工作，但它仍然不能与IE8一起工作。谢谢你的建议。删除IE7兼容性标签，这将修复它，使其与此版本的jQuery一起工作。（在头上）@Ben McCormack，真的很奇怪。Visual Studio挫折感！