표시해야하는 테이블의 숨겨진 행에서 slideDown 애니메이션을 만드는 방법은 무엇입니까?

Question

나는 애니메이션이 show, hide 및 fade 외에 테이블을 직접 행에 불가능하다는 것을 알고 있지만, 당신은 display:block와 div 내부 테이블의 셀을 포장하는 경우이 실제로 가능하다.

내 문제는 정확히 동일한 로직을 사용하는 동일한 예제의 경우 slideUp에서 작동하고 slideDown에서 작동하지 않는다는 것입니다.

논리는 아주 간단합니다 :

1. 추가 사업부는 사업부에 애니메이션을 적용 테이블 셀
2. 을 포장
3. 숨기기/테이블

의 행을 보여 내 코드는 다음과 같습니다. JSfiddle

논리/코드에 이상이 있습니까? ? 감사!

Answer 1

코드가 업데이트되었습니다. 여기를 확인하시기 바랍니다 : JSFiddle

$('body').on('click','.click2',function(e){ 
    e.preventDefault(); 
    if($('.changeable').is(':hidden')){ 
      $('.changeable div').css('display','none'); 
      $('.changeable').css('display','table-row').find('div').slideDown(1000); 
    } 
    else{ 
     $('.changeable div').slideUp(1000, function(){$('.changeable').hide()});   
    } 

Answer 2

을이 당신이 원하는 효과를 얻을 클래스를 추가 할 JQuery와 사용하는 CSS를 사용할 수있는 스타일의 문제이기 때문에. jquery 슬라이드는 시작이나 끝 부분에서 다소 불안정 할 수 있습니다.

작업, 예를 들어,이 바이올린을 참조하십시오 http://jsfiddle.net/mikemjharris/ubptawr3/

는 당신이 필요로하는 스타일을 추가하는 쇼 클래스가와 JS는 다음과 단순화 :

$('body').on('click','.click2',function(e){ 
    e.preventDefault(); 
    $('.changeable').toggleClass('show')  
});