Question

我正在尝试使用jade来淡出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>

Working Example Here（将 / edit 添加到网址以播放示例）。

在IE7中似乎一切正常，但在Firefox和Chrome中，我得到了奇怪的行为。任何人都可以找出原因吗？我做错了什么，或者它是浏览器错误还是jQuery中的错误？

Answer 1

这是1.3.2中的一个错误。我没有在1.3中看到这种行为。

将您的jQuery脚本指向

http://jqueryjs.googlecode.com/files/jquery-1.3.min.js

你会看到问题消失。

这是一个固定的例子：

http://jsbin.com/olule/edit

Answer 2

问题是由jQuery 1.3.2检测可见元素的方式引起的。 fadeOut（）函数首先使用is（“：visible”）检测给定元素是否可见。如果它发现该元素是隐藏的，则它不会执行任何操作。根据文档，jQuery 1.3.2引入了一个更改，其中“如果元素和它的父母在文档中消耗空间，则假定元素可见”。现在，问题是如果元素只包含浮动元素或绝对定位的元素，它本身不占用空间（它没有宽度和高度）。你可以通过赋予元素一些非零高度和宽度来解决这个问题。

Answer 3

在元素中添加 对我有用，但我希望他们能尽快修复它。

在带有浮动元素和绝对定位元素的元素上使用jQuery fadeOut函数时的奇怪行为

3 个答案: