странное поведение при использовании функции jQuery fadeOut для элемента с плавающим элементом и абсолютно позиционированным элементом - PullRequest
Новая
       16

странное поведение при использовании функции jQuery fadeOut для элемента с плавающим элементом и абсолютно позиционированным элементом

4 голосов
/ 09 апреля 2009

Я пытаюсь использовать 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>

Рабочий пример здесь (добавьте / edit к URL для воспроизведения с примером).

В IE7 все работает нормально, но в Firefox и Chrome я получаю странное поведение. Кто-нибудь может понять, почему? Я делаю что-то не так, или это ошибка браузера или ошибка в jQuery?

Ответы [ 3 ]

9 голосов
/ 09 апреля 2009

Это ошибка в 1.3.2. Я не вижу поведения в 1.3.

Направьте ваш скрипт jQuery на

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

И вы увидите, что проблема исчезнет.

Вот пример с исправленным:

http://jsbin.com/olule/edit

3 голосов
/ 21 мая 2009

Проблема вызвана тем, как jQuery 1.3.2 обнаруживает видимые элементы. Функция fadeOut () сначала определяет, является ли данный элемент видимым, используя is (": visible"). Если он обнаруживает, что элемент скрыт, он ничего не делает. Согласно документации, в jQuery 1.3.2 внесено изменение, в котором «элемент считается видимым, если он и его родители занимают место в документе». Теперь проблема в том, что если элемент содержит только плавающие элементы или абсолютно позиционированные элементы, он сам не занимает места (он имеет нулевую ширину и высоту). Вы можете обойти это, задав элементу ненулевую высоту и ширину.

0 голосов
/ 26 августа 2009

Добавление &nbsp; в элемент работало для меня, но я надеюсь, что они исправят это как можно скорее.

...