2011-05-11 3 views
1

fadeToggle이 예상대로 작동하지 않습니다. 여기 fadeToggle 하위 요소

은 샘플 바이올린입니다 : 내가해야 할 일을 http://jsfiddle.net/JNu2q//

이 요소가 페이드 인 이상을 가지고,하지만 바이올린과 자식의 모든 요소

<div id="happenings"> 
    <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3> 
    <span class="ui-helper-hidden"><div class="more"> yadada</div></span> 
    <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3> 
     <span class="ui-helper-hidden">THINGS</span> 
      <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3> 
     <span class="ui-helper-hidden"">THINGS</span> 
</div> 
<script type="text/javascript"> 
$('#happenings>h3').click(function() { 

    $(this).next('span').fadeToggle() 
    $('span', this).toggleClass('ui-icon-circle-triangle-s'); 
}); 
</script> 

때 클릭 첫 번째 항목을 보여줍니다 확장하지만 퇴색하지도 않으며 계약에서 사라지지 않습니다.

이것은 내가하려는 일의 매우 축소 된 버전입니다. 프로파일을 아약스를 통해로드하고 있습니다. 스팬의 내부에는 몇 가지 다른 요소가 있습니다. 그래서 확장 및 계약. 즉, 나는 페이드하는 범위와 자식 DIV가 필요합니다.

감사

답변

1

를 이것은 당신의 범인

<div class="more"> yadada</div> 

그것은 블록 디스플레이를 갖는 DIV처럼 보이는 페이드에 덤비는한다 당신이 기간에

<span class="more"> yadada</span> 

을 변경하거나 설정합니다.이 디스플레이는 인라인 (또는 인라인 블록)

수 있어요3210
<div class="more" style="display:inline;"> yadada</div> 

그러면 작동합니다.

+0

실제로 그렇습니다. 그러나 이제는 다른 것을 다시 생각해 볼 필요가 없습니다. 고마워, 적어도 지금은 그것이 작동하지 않는 이유를 알아. – matchew

+1

@matchw이 게시물 (http://stackoverflow.com/questions/1091322/how-to-fade-to-display-inline-block)은 사용자 정의 애니메이션을 사용하여 컨테이너를 표시해야 할 경우 페이드를 수행 할 것을 제안합니다. 블록. –

관련 문제