[jQuery] Table row 숨겼다 열때 애니메이션 효과 주기

jQuery 에는 show, hide API로 element를 숨겼다 보였다 할 수 있다.

그리고 열리고 닫힐 때 애니메이션 효과도 같이 줄 수 있다.

이 사실만 알고 있는 채로 tr element에 show, hide 옵션을 걸고

animate 효과를 주는데...

show, hide는 잘 되는데 애니메이션 효과가 안되거나 이상하게 나온다!!

구글링을 통해서 알아보니 table의 row 속성인 tr 과 td에는 애니메이션 효과를 줄 수가 없단다.

하지만 안되는게 세상에 어디 있나.

다시 구글링을 통해 해결법을 검색!

아~ 역시! 세상에 사람은 많고 같은 고민을 하는 사람도 많으며 해결한 사람도 많다!
http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row

해결법은 숨기고 열리는 모션을 row속성에 걸 수 없고

각 row에 div를 부여하고 그 안의 element들에게 애니메이션 효과를 주는 법이 었다.

뭐 의도한 거와는 사실 다르지만 비슷해 보이니 우선 사용하기로 했다.

위 링크의 소스에 여러가지 해결법이 많지만

가장 짧은 소스로 선택해서 재구성해서 사용해 보았다.

jQuery.fn.prepareTableRowForSliding = function() {
    $tr = this;
    $tr.children('td').wrapInner('<div style="display: none;" />');
    return $tr;
};

jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
    $tr = this;
    if ($tr.is(':hidden')) {
        $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    } 
    
    return $tr;
};

위는 플러그인을 설정

사용법은
숨길때는
$("tr셀렉터").hide().prepareTableRowForSliding();

그리고 보여줄 때는
$("tr셀렉터").slideFaeTableRow(300, 'swing', function(){});

음! IE, Firefox, Chrome 다 동일한 화면을 보여준다. 만족!