Geek Answers Handbook

Strange behavior when using jQuery fadeOut function for floating element and absolutely positioned element

I am trying to use jQuery to fade out a div using the fadeOut function. In most cases, this works fine, but in some cases, not all content disappears. If I have an absolutely positioned element and a floating element inside a div, the fadeOut function does not work. If I have an absolutely positioned element, this will not work. But if I have an absolutely positioned element and an unshielded element, it works. This may seem difficult 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>

A working example is here (add / edit to the url to play with the example).

Everything works fine in IE7, but in Firefox and Chrome I get strange behavior. Can anyone understand why? Am I doing something wrong, or is it a browser error or an error in jQuery?

+4
source share
3 answers

This is a bug in 1.3.2. I do not see the behavior in 1.3.

Point your jQuery script to

http://jqueryjs.googlecode.com/files/jquery-1.3.min.js

And you will see that the problem disappears.

Here's an example with a fix:

http://jsbin.com/olule/edit

+9
source

The problem is caused by the way jQuery 1.3.2 detects visible elements. The fadeOut () function first determines whether a given element is visible using (": visible"). If he discovers that the element is hidden, he does nothing. According to the documentation, a change was made in jQuery 1.3.2, in which "an element is considered visible if it and its parents consume space in the document." Now the problem is that if an element contains only floating elements or absolutely positioned elements, it itself does not occupy a space (it has zero width and height). You can get around this by giving the element some non-zero height and width.

+3
source

Adding &nbsp; to the element that worked for me, but I hope they fix it as soon as possible.

0
source

More articles:


All Articles