我正在尝试使用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>
工作示例此处(添加/编辑 URL以使用示例).
在IE7中似乎一切正常,但在Firefox和Chrome中,我得到了奇怪的行为.任何人都可以找出原因吗？我做错了什么,或者它是浏览器错误还是jQuery中的错误？
这是1.3.2中的一个错误.我没有在1.3中看到这种行为.
将您的jQuery脚本指向
http://jqueryjs.googlecode.com/files/jquery-1.3.min.js
你会看到问题消失了.
这是一个固定的例子:
| 归档时间： |
|
| 查看次数： |
4387 次 |
| 最近记录： |