2009-04-09 6 views
4

Ich versuche, jQuery verwenden, um ein div auszublenden, mit der FadeOut-Funktion. In den meisten Fällen scheint es zu funktionieren, aber in bestimmten Fällen blendet nicht der gesamte Inhalt aus. Wenn ich ein absolut positioniertes Element und ein floated-Element innerhalb des Div habe, funktioniert die fadeOut-Funktion nicht. Wenn ich nur ein absolut positioniertes Element habe, funktioniert es nicht. Aber wenn ich ein absolut positioniertes Element und ein unausgereiftes Element habe, funktioniert es. Das mag hart klingen zu erklären, aber Sie können es selbst versuchen, diesen Test Code:seltsames Verhalten bei der Verwendung von jQuery fadeOut Funktion auf Element mit Floated-Element und absolut positionierten Element

<!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 (bearbeiten/ zur URL hinzufügen mit dem Beispiel zu spielen).

Alles scheint in IE7 gut zu funktionieren, aber in Firefox und Chrome, bekomme ich das seltsame Verhalten. Kann jemand herausfinden, warum? Mache ich etwas falsch oder ist es ein Browser Bug oder ein Bug in jQuery?

Antwort

3

Das Problem wird durch die Art und Weise verursacht wird, wie jQuery 1.3.2 sichtbare Elemente erkennt. Die Funktion fadeOut() erkennt zuerst, ob das angegebene Element mit is (": visible") sichtbar ist. Wenn es herausfindet, dass das Element versteckt ist, tut es nichts. Gemäß der Dokumentation führte jQuery 1.3.2 eine Änderung ein, bei der "Element als sichtbar angenommen wird, wenn es und seine Eltern Speicherplatz im Dokument verbrauchen". Nun, das Problem ist, dass, wenn das Element nur floated Elemente oder absolut positionierte Elemente enthält, es selbst keinen Platz benötigt (es hat Breite und Höhe null). Sie können dies umgehen, indem Sie dem Element eine Höhe und Breite ungleich Null geben.

0

Hinzufügen von &nbsp; in das Element funktionierte für mich, aber ich hoffe, sie werden es so schnell wie möglich beheben.

Verwandte Themen