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?
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: