jQuery : Toggle & Fade In?

Question

나는 잘 작동하는 다음 토글을 가지고있다. 신은 내가 어떻게 작동 하는지를 안다; 이 모든 것을 이해하지 못한다.

jQuery(function() { 
    jQuery('.toggle1').click(function() { 
     jQuery('.toggle-box').slideToggle('fast'); 
     return false; 
    }); 
});​ 

은 그것의 열려있는 상자를 전환 한 후 페이드하는 .toggle-box에 어떤 수 있습니까?

나는 추가 시도 ..

jQuery(".toggle-box").fadeIn(2000); 

는 그러나 운이 없었다.

전혀 가능합니까?

도움을 주셔서 감사합니다.

Answer 1

여기에 당신을 도울 수 있지만, 일반적으로, 단지 어떤 용기를 가질 수있는 몇 가지 모범 사례 일들이있다 또한 너무

같은 fadeIn()을 (내가 그것을 .toggle - boxInner 전화 할게), 일부는 것을 청소있다 당신이 토글 상자가 다시 슬라이드 때 사라집니다 있도록 내부 용기를 .fadeToggle 할 수 있습니다 그냥 지름길

$(function(){ // when ready... 

    // here's your onClick listener for the toggle1 class element(s) 
    $('.toggle1').click(function(){ 

     // slideToggle the toggle-box 
     $('.toggle-box').slideToggle('fast', function(){ 

      // this is called when the toggle-box slideToggle is complete 
      $('.toggle-box .toggle-boxInner').fadeToggle('fast'); 
     }); 
     return false; // i don't think you should need this unless you're using 
         // a <a/> or <input type='submit' /> 
         // as the .toggle1 element 
    }); 
}); 

, 코드있어 일어날 수 있습니다. .fadeIn ('slow')을 'fast'로 자유롭게 변경하십시오.

희망이 도움이됩니다.

편집 : P 두 현재의 대답은 내가 요청을 받고 생각하지만 문제는 다소 모호 무엇을 해결하지 않는

Answer 2

$(function() { 
    $('.toggle-box').hide().contents().hide(); 
    $('.toggle1').on('click', function(e) { 
     e.preventDefault(); 
     $('.toggle-box').slideToggle('fast', function(e) { 
      if ($(this).is(':visible')) { 
       $(this).contents().fadeIn(2000); 
      }else{ 
       $(this).contents().hide(); 
      } 
     }); 
    }); 
}); 

FIDDLE