我正在尝试使用 jQuery 淡出 div，使用 fadeOut 函数。在大多数情况下，它似乎工作正常，但在某些情况下，并非所有内容都会淡出。如果我在 div 中有一个绝对定位的元素和一个 float 元素，则 fadeOut 函数不起作用。如果我只有一个绝对定位的元素，它就不起作用。但如果我有一个绝对定位的元素和一个无样式的元素，它就可以工作。这听起来可能很难解释，但您可以使用以下测试代码自行尝试:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>jQuery fadeOut test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div id="testBox1" style="position: relative">
<div>test</div>
<p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox1').fadeOut()">fade out</button>
<!-- works -->
<hr>
<div id="testBox2" style="position: relative">
<div style="float: left">test</div>
<p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox2').fadeOut()">fade out</button>
<!-- doesn't work -->
<hr>
<div id="testBox3" style="position: relative">
<p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox3').fadeOut()">fade out</button>
<!-- doesn't work -->
</body></html>
Working Example Here (将 /edit 添加到 URL 中以演示该示例)。
在 IE7 中一切似乎都工作正常，但在 Firefox 和 Chrome 中，我遇到了奇怪的行为。谁能弄清楚为什么吗？我是否做错了什么，或者是浏览器错误还是 jQuery 中的错误？
最佳答案
这是 1.3.2 中的一个错误。我没有看到 1.3 中的行为。
将 jQuery 脚本指向
http://jqueryjs.googlecode.com/files/jquery-1.3.min.js
你会发现问题消失了。
这是一个已修复的示例:
关于jquery - 在具有 float 元素和绝对定位元素的元素上使用 jQuery fadeOut 函数时出现奇怪的行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/735292/