1. 首页
  2. 问答
  3. 奇怪的行为，当使用jQuery淡出功能元素与浮动元素和绝对定位元素

奇怪的行为，当使用jQuery淡出功能元素与浮动元素和绝对定位元素

2009-04-09 66 views
4

我想使用jQuery淡出div，使用fadeOut函数。在大多数情况下，它似乎工作正常，但在某些情况下，并非所有内容都会淡出。如果我在div中有绝对定位的元素和浮动元素，则fadeOut函数不起作用。如果我只有一个绝对定位的元素，它不起作用。但是如果我有一个绝对定位的元素和一个没有风格的元素，它就可以工作。这听起来可能很难解释，但你可以使用这个测试代码，自己尝试一下：奇怪的行为，当使用jQuery淡出功能元素与浮动元素和绝对定位元素

<!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（添加/编辑的URL与示例玩）。

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

来源

2009-04-09 Elias Zamaria

回答

3

问题是由jQuery的1.3.2如何检测可见元素的方式造成。 fadeOut（）函数首先使用is（“：visible”）检测给定元素是否可见。如果它发现元素被隐藏，它什么都不会做。根据文档，jQuery 1.3.2引入了一个变化，其中“如果元素及其父母消耗文档中的空间，则该元素被视为可见”。现在，问题是如果元素只包含浮动元素或绝对定位元素，它本身不占用空间（它的宽度和高度都为零）。你可以通过给元素设置一些非零的高度和宽度来解决这个问题。

来源

2009-05-20 20:30:51

0

在为我工作的元素中添加&nbsp;，但我希望他们能尽快修复它。

来源

2009-08-26 11:13:29

相关问题

 相关问题