jQuery는 HTML 테이블에서 'animation'을 토글합니다.

Question

div를 사용하는 동안 비슷한 방식으로 '애니메이션 방식으로'전체 표 행이나 모든 셀을 위아래로 슬라이드 할 수 있습니까? 내가 체크 한 이후로, 그것의 다만 전시 또는 숨기기 그러나 어떤 생기없는도.

HTML :

<table> 
<tbody> 
    <tr id="target"> 
     <td>User</td> 
     <td>will</td> 
     <td>click</td> 
     <td>me</td> 
    </tr> 
    <tr id="subject"> 
     <td>And</td> 
     <td>I</td> 
     <td>should</td> 
     <td>expand</td> 
    </tr> 
</tbody> 

CSS :

* { margin: 0; padding: 0; } 

table { margin: 0 auto; } 
table tr { background: #d4d4d4; } 
table tr > td { width: 80px; } 

jQuery를 :

<script src="jquery.js"></script> 
    <script>$(document).ready(function(){ 
    $('#subject').hide(); 
    $('#target').click(function() { 
    $('#subject').slideToggle(); 
    }); 
}); 
</script> 

Answer 1

테이블 요소에 애니메이션이 작동하지 않거나 예상대로 작동하지 않습니다. Div의 내부 애니메이션 인 td을 사용하면 멋진 애니메이션을 얻을 수 있습니다. 테이블 td에 대한 다이렉트 애니메이션은 즉시 숨기고 표시합니다.

Answer 2

테이블은 높이를 자체 제어합니다. 당신은 그럴

display: block; 

에 변경하거나 사업부와 내부를 포장 할 수 있습니다. 브라우저가 표시 디스플레이 속성에 대해 다른 값 (표 열 블록)을 사용하기 때문에, 애니메이션 http://jsfiddle.net/G7BaJ/

Answer 3

표 행 본 특정 장애 : 블록TR에 여기

는 디스플레이 일부 테스트입니다 . 애니메이션이없는 .hide() 및 .show() 메서드는 항상 테이블 행과 함께 사용하는 것이 안전합니다. jQuery 버전 1.1.3부터, .fadeIn() 및 .fadeOut()도 사용할 수 있습니다.

는

http://api.jquery.com/slideToggle/

https://api.jquery.com/slideDown/

https://api.jquery.com/slideUp/