jQuery : 아동 요소는 $ ( '. parent_class') 불투명 효과로 사라집니다.

Question

이 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는 이것을 잘 수행하지만, 즉, 내가 Fadein () 또는 fadeto ()를 할 때, 또는 단순히 부모에게 .css ( '불투명도', '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)

그 후 부모는 효과를 얻고 아이 사라집니다.

부모와 자녀가 어떻게 애니메이션을하고 불투명도 속성을 공유 할 수 있습니까?

Answer 1

나는 미리 손에 요소의 투명성을 정의한 다음 부모 요소에서 fadein ()을 수행하는 데 약간의 성공을 거두었습니다. 만약 내가한다면:

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

이것은 내가가는 효과를줍니다. 그러나 이상합니다. 먼저 아이의 불투명도를 설정해야합니다. 내가 둘 다 동시에 설정하면

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

또는 내가 부모에게 먼저 설정하면, 내가 fadein ()을 할 때 아이는 이전과 같이 사라집니다.

Answer 2

선택기 내의 부모와 자식 요소를 모두 지정하여 동시에 효과/CSS를 적용하는 것이 무엇입니까?

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