gpt4 book ai didi

jquery - 在具有 float 元素和绝对定位元素的元素上使用 jQuery fadeOut 函数时出现奇怪的行为

转载 作者:行者123 更新时间:2023-11-30 23:52:56 26 4
gpt4 key购买 nike

我正在尝试使用 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

你会发现问题消失了。

这是一个已修复的示例:

http://jsbin.com/olule/edit

关于jquery - 在具有 float 元素和绝对定位元素的元素上使用 jQuery fadeOut 函数时出现奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/735292/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com