Странное поведение при использовании функции jQuery fadeOut для элемента с плавающим элементом и абсолютно позиционированным элементом
Я пытаюсь использовать jQuery для исчезновения div, используя функцию fadeOut. В большинстве случаев, кажется, работает нормально, но в некоторых случаях не весь контент исчезает. Если у меня есть абсолютно позиционированный элемент и плавающий элемент внутри div, функция fadeOut не работает. Если у меня есть только абсолютно позиционированный элемент, он не работает. Но если у меня есть абсолютно позиционированный элемент и элемент без стиля, это работает. Это может показаться трудно объяснить, но вы можете попробовать это самостоятельно, используя этот тестовый код:
<!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>
Пример работы здесь (добавьте / отредактируйте URL, чтобы поиграть с примером).
В IE7 все работает нормально, но в Firefox и Chrome у меня странное поведение. Кто-нибудь может понять, почему? Я делаю что-то не так, или это ошибка браузера или ошибка в jQuery?
3 ответа
Это ошибка в 1.3.2. Я не вижу поведения в 1.3.
Направьте ваш скрипт jQuery на
http://jqueryjs.googlecode.com/files/jquery-1.3.min.js
И вы увидите, что проблема исчезнет.
Вот пример с этим исправлено:
Проблема вызвана тем, как jQuery 1.3.2 обнаруживает видимые элементы. Функция fadeOut() сначала определяет, является ли данный элемент видимым, используя is(":visible"). Если он обнаруживает, что элемент скрыт, он ничего не делает. Согласно документации, в jQuery 1.3.2 внесено изменение, согласно которому "элемент считается видимым, если он и его родители занимают место в документе". Теперь проблема в том, что если элемент содержит только плавающие элементы или абсолютно позиционированные элементы, он сам не занимает места (он имеет нулевую ширину и высоту). Вы можете обойти это, задав элементу ненулевую высоту и ширину.
Добавление в элемент работал для меня, но я надеюсь, что они исправят это как можно скорее.