为什么 jQuery fadeIn() 和 fadeOut() 在这个例子中看起来很奇怪？
我一直在 ASP.NET 项目中使用 jQuery，发现 .fadeIn() 和 fadeOut() 函数有一些奇怪的行为。在下面的示例中，单击按钮 (ID Button1) 应该会导致 ID 为 Label1 的文本范围和 ID 为 的按钮TextBox1 执行以下操作：
- 淡出 将
- 文本框的文本和文本范围更改为
您单击了按钮 - 淡入
基于我正在使用的浏览器，我得到了 3 种不同的场景，每个元素在每种情况下的功能都不同。以下是我实际单击按钮时发生的情况：
TextBox1：
- 在 IE8 中，文本框淡出，更改文本，然后淡入
- 在 IE8 兼容性视图中，文本框淡出，更改文本，然后淡入。但是，框中的文本看起来与单击按钮之前略有不同。
- 在 FireFox 3.5.8 中，文本框不会淡出（但它会“暂停”淡出所需的时间），会更改文本，然后似乎会在淡入的地方再次“暂停”
Label1：
- 在 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>
<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>
I've been playing with jQuery in an ASP.NET project and am finding some odd behavior with the .fadeIn() and fadeOut() functions. In the below example, a click on the button (ID Button1) is supposed to cause both the span of text with ID Label1 and the the button with the ID TextBox1 to do the following things:
- Fade Out
- Change the text of both the text box and the span of text to be
You clicked the button - Fade In
Based on the browser I'm using, I get 3 different scenarios, and each element functions differently in each situation. Here's what happens when I actually click the button:
TextBox1:
- In IE8, the text box fades out, changes text, then fades back in
- In IE8 Compatibility View, the text box fades out, changes text, then fades back in. However, the text in the box looks a little different than before the button was clicked.
- In FireFox 3.5.8, the text box doesn't fade out (but it does "pause" for the amount of time the fade would take), does change the text, then seems to "pause" again where it would be fading in.
Label1:
- In IE8, the label doesn't fade out (but it does "pause" for the amount of time the fade would take), does change the text, then seems to "pause" again where it would be fading in.
- In IE8 Compatibility View, the label does fade out, change text, and fades back in, but the text looks a little different than before the button was clicked.
- In FireFox 3.5.8, the label doesn't fade out (but it does "pause" for the amount of time the fade would take), does change the text, then seems to "pause" again where it would be fading in.
Two questions:
- What's going in to make each element to behave differently in different browsers?
- Is there a better way to get the functionality I'm looking for across multiple platforms?
Here's the source code of the file:
<!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>
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我遇到了同样的问题。为了修复它，我尝试了这个并且它有效。
代替：
我使用：
如果您确实需要 Visual Studio 版本，请尝试使用不同的版本或从不同的来源获取它。
I experienced the same problem. In order to fix it, I tried this and it worked.
Instead of:
I used:
Try using a different version or getting it from a different source if you really need the Visual Studio version.