jQuery - 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)
после этого родитель получает эффект, а дочерний исчезает.
Как родитель и потомок могут быть анимированы вместе и совместно использовать свойства непрозрачности?
Решение 2
Я добился некоторого успеха, предварительно определив прозрачность элементов, а затем выполнив функцию fadeIn() для родительского элемента.Если я это сделаю:
$('.child').css('opacity', '0.50');
$('.parent').css('opacity', '0.50');
$('.parent').fadeIn('fast');
это дает эффект, к которому я стремлюсь.Как бы это ни было странно, сначала я должен установить непрозрачность для дочернего элемента.Если я установлю их оба одновременно
$('.child, .parent').css('opacity','0.50');
или, если я сначала установлю его для родительского элемента, когда я выполняю fadeIn(), дочерний элемент исчезает, как и раньше.
Другие советы
Почему бы не попробовать указать как родительский, так и дочерний элементы в вашем селекторе, применив effect / css к обоим одновременно:
$('.parent, .child').fadeTo('fast',0.50);