jQuery: дочерний элемент исчезает с эффектами непрозрачности $('.parent_class') в IE

У меня есть этот html:

<div class="foo parent">
  <div class="child"></div>
</div>

с некоторым css:

    .foo{ 
         position:absolute; 
         left: -117px;
         background:#000000 none repeat scroll 0 0;
         color:#FFFFFF;
         z-index:8;
     }
    .parent{
         top:23px;
         width:100px;
         height:30px;
         display:none;  #parent and child to start out hidden
     }
    .child{
         position:relative;
         left:94px;
         top:5px;
         height:20px;
         width: 110px;
         background:#000000;
         z-index:9;
    }

Я хочу, чтобы этот родитель и дочерний элемент исчезали вместе и в конечном итоге имели непрозрачность: 0,50. Firefox делает это просто отлично, но IE создает проблемы: когда я делаю fadeIn() или fadeTo() или просто применяю .css('opacity','0.50') к родительскому элементу, родительский рендерится, а дочерний - нет. т.

$('.parent').fadeTo('fast',0.50)

--> заставляет родителя исчезать, но потомок никогда не появляется.

$('.parent').fadeIn('fast')

--> появляется родитель, дочерний элемент отсутствует

$('.parent').css('opacity','0.55')
$('.parent').show()

--> родитель появляется с непрозрачностью, дочерний никогда не появляется

$('.parent').show()

--> родитель и дочерний элемент выглядят нормально (но без анимации или прозрачности). Если я сделаю

$('.parent').css('opacity','0.55') or $('.parent').fadeTo('fast', 0.50)

после этого родитель получает эффект, а дочерний элемент исчезает.

Как родительский и дочерний элементы могут быть анимированы вместе и иметь общие свойства непрозрачности?


animation jquery opacity effects
person Purrell    schedule 14.09.2009    source источник
comment
Вы используете новейшую версию jQuery?   -  person Georg Schölly    schedule 14.09.2009

Ответы (2)


arrow_upward
3
arrow_downward

Почему бы не попробовать указать как родительский, так и дочерний элементы в вашем селекторе, одновременно применяя эффект/css к обоим:

$('.parent, .child').fadeTo('fast',0.50);
person karim79    schedule 14.09.2009
comment
хорошо, да, это работает, как и ожидалось, но только если я разобью их, чтобы они были братьями и сестрами, а не родителем и ребенком. Я начинаю с display:none; так что кажется, что мне нужно fadeIn() вместо fadeTo() (они не появляются, когда я делаю fadeTo(), начиная с display:none, они должны?) $(.parent,.child').css( 'opacity','0.50') $(.parent,.child').fadeIn('fast') --›Работает так, как я хочу в IE, но только если они братья и сестры, в противном случае, если они родитель-потомок, как над дочерним элементом не отображается. Я могу работать с этим, но я хотел бы иметь их в качестве родителей и братьев и сестер, поскольку это помогает с позиционированием. - person Purrell; 14.09.2009
comment
При ближайшем рассмотрении мне действительно нужно, чтобы они были родителем-братом. Это раздражает, я пробовал много разных конфигураций классов, локаторов, методов jquery. Кажется, как только я даю родительской прозрачности с помощью .css или .fadeIn() или .fadeTo(), дочерний элемент исчезает и не может быть повторно визуализирован. Он больше не отвечает на .show() или .css('display','block') и т. д. Это происходит, если я применяю эффект к родителю или к обоим одновременно, как было предложено. Если эффект вообще применяется к родителю, потомок исчезает. - person Purrell; 14.09.2009

arrow_upward
0
arrow_downward

Мне удалось заранее определить прозрачность элементов, а затем выполнить функцию fadeIn() для родительского элемента. Если я сделаю:

$('.child').css('opacity', '0.50');
$('.parent').css('opacity', '0.50');
$('.parent').fadeIn('fast');

это дает эффект, к которому я стремлюсь. Однако это странно, я должен сначала установить непрозрачность для ребенка. Если я установлю их оба одновременно

$('.child, .parent').css('opacity','0.50');

или если я сначала устанавливаю его для родителя, когда я делаю fadeIn(), дочерний элемент исчезает, как и раньше.

person Purrell    schedule 14.09.2009