在具有浮动元素和绝对定位元素的元素上使用 jQuery fadeOut 函数时出现奇怪的行为
我正在尝试使用 jQuery 淡出 div，使用 fadeOut 函数。 在大多数情况下，它似乎工作正常，但在某些情况下，并非所有内容都会淡出。 如果我在 div 中有一个绝对定位的元素和一个浮动元素，则 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>
这里的工作示例（添加 < strong>/edit 到要播放示例的 URL）。
在 IE7 中一切似乎都工作正常，但在 Firefox 和 Chrome 中，我遇到了奇怪的行为。 谁能弄清楚为什么吗？ 是我做错了什么，还是浏览器错误或 jQuery 中的错误？
I am trying to use jQuery to fade out a div, using the fadeOut function. In most cases, it seems to work fine, but in certain cases, not all of the content fades out. If I have an absolutely positioned element and a floated element within the div, the fadeOut function doesn't work. If I only have an absolutely positioned element, it doesn't work. But if I have an absolutely positioned element and an unstyled element, it works. This may sound hard to explain, but you can try it yourself using this test code:
<!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 (add /edit to the URL to play with the example).
Everything seems to work fine in IE7, but in Firefox and Chrome, I am getting the strange behavior. Can anyone figure out why? Am I doing something wrong, or is it a browser bug or a bug within jQuery?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是 1.3.2 中的一个错误。 我没有看到 1.3 中的行为。
将 jQuery 脚本指向
http://jqueryjs.googlecode.com/files/jquery -1.3.min.js
你会发现问题消失了。
这是一个已修复的示例：
http://jsbin.com/olule/edit
It's a bug within 1.3.2. I don't see the behavior in 1.3.
Point your jQuery script to
http://jqueryjs.googlecode.com/files/jquery-1.3.min.js
And you'll see the problem disappear.
Here's an example with it fixed:
http://jsbin.com/olule/edit
该问题是由 jQuery 1.3.2 检测可见元素的方式引起的。 fadeOut() 函数首先使用 is(":visible") 检测给定元素是否可见。 如果它发现该元素被隐藏，则不会执行任何操作。 根据文档，jQuery 1.3.2 引入了一项更改，其中“如果元素及其父元素占用了文档中的空间，则该元素被假定为可见”。 现在的问题是，如果元素仅包含浮动元素或绝对定位元素，则它本身不占用空间（宽度和高度为零）。 您可以通过为元素指定一些非零的高度和宽度来解决此问题。
The problem is caused by the way how jQuery 1.3.2 detects visible elements. The fadeOut() function first detects whether the given element is visible using is(":visible"). If it finds out that the element is hidden, it does not do anything. According to the documentation, jQuery 1.3.2 introduced a change in which "element assumed as visible if it and its parents consumes space in document". Now, the problem is that if the element contains only floated elements or absolutely positioned elements, it itself takes no space (it has zero width and height). You can work around this by giving the element some non-zero height and width.
在元素中添加
Adding