2012-10-16 7 views
2

표 셀을 사라지게 만드는 방법을 알고 있지만 눈 깜짝 할 사이에 발생합니다. 함수가 호출 될 때 테이블 셀의 높이를 서서히 작게하려고합니다. 나는 자바 스크립트에 매우 익숙하며 도움을 주시면 감사하겠습니다. 감사!표 셀 높이를 점차적으로 변경하십시오.

답변

1

애니메이션을 적용하려면 jQuery을 사용하는 것이 가장 쉽습니다. jQuery는 일상 생활을 훨씬 쉽게 만들어주는 Javascript 함수 라이브러리입니다. 필요한 기능은 .animate()입니다. 테이블을

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

을 설정하고 키 아이디 heightchange (가 할 수있는 모든 것을하고 싶지 행을 줄 내가 사용 : 시작하려면, 페이지의 <head> 섹션에 코드 줄을 추가합니다. 이 예제에서). 이처럼 버튼을 만든 다음

<script type="text/javascript> 
    function expandTableRow() { 
     $('#heightchange').animate({ 
      height: '200px' 
     }); 
    } 
</script> 

:

<a href="javascript:expandTableRow();">Click here to expand</a> 
+0

죄송하지만, 모든 –

+0

에서이 didnt 한 일이 우리가 볼 수있는 살아있는 예제를 가지고 있습니까? 어떤 브라우저를 사용하고 있습니까? –

+0

Safari. 하지만 여전히, 나는 자바 스크립트에서 대답을 선호합니다 –

0

나는 그런 (위 추가 라인 아래) HTML 문서의 헤드 섹션이 추가, 다음 코드를 추가합니다 높이가 변하는 표 셀 하나만 상상하는 방법을 잘 모르는 경우. 하지만 아마도 테이블 셀 컨텐츠의 등장을 원할 것입니다.

은 CSS3 전환하여 수행 할 수 있습니다 : transition: color 1000ms linear;

==>example code