Databases
StackOverflow2013
Postsdbo
POstrange behavior when using jQuery fadeOut function on element with floated element and absolutely positioned element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POstrange behavior when using jQuery fadeOut function on element with floated element and absolutely positioned element
    text
    copied!<p>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:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt;&lt;head&gt; &lt;title&gt;jQuery fadeOut test&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="testBox1" style="position: relative"&gt; &lt;div&gt;test&lt;/div&gt; &lt;p style="position: absolute; left: 0; top: 0"&gt;This text should fade out.&lt;/p&gt; &lt;/div&gt; &lt;br&gt;&lt;br&gt; &lt;button type="button" onclick="$('#testBox1').fadeOut()"&gt;fade out&lt;/button&gt; &lt;!-- works --&gt; &lt;hr&gt; &lt;div id="testBox2" style="position: relative"&gt; &lt;div style="float: left"&gt;test&lt;/div&gt; &lt;p style="position: absolute; left: 0; top: 0"&gt;This text should fade out.&lt;/p&gt; &lt;/div&gt; &lt;br&gt;&lt;br&gt; &lt;button type="button" onclick="$('#testBox2').fadeOut()"&gt;fade out&lt;/button&gt; &lt;!-- doesn't work --&gt; &lt;hr&gt; &lt;div id="testBox3" style="position: relative"&gt; &lt;p style="position: absolute; left: 0; top: 0"&gt;This text should fade out.&lt;/p&gt; &lt;/div&gt; &lt;br&gt;&lt;br&gt; &lt;button type="button" onclick="$('#testBox3').fadeOut()"&gt;fade out&lt;/button&gt; &lt;!-- doesn't work --&gt; &lt;/body&gt;&lt;/html&gt; </code></pre> <p><a href="http://jsbin.com/obipe" rel="nofollow noreferrer">Working Example Here</a> (add <strong>/edit</strong> to the URL to play with the example).</p> <p>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?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload