Menu
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?
274
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
185
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
