Home/ Questions/Q 169183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T12:35:05+00:00

I am trying to use jQuery to fade out a div, using the fadeOut

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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

    • 0