JQuery UI는 열 애니메이션을 부드럽게 처리합니다.

Question

열을 확장/축소하는 옵션이있는 테이블이 있습니다. JQuery UI 사용하기 슬라이드를 토글 (togle)하기 때문에 슬라이드를 넣을 수 있습니다. 그러나 매우 부드러운 전환이 아니며 단추를 클릭 할 때 꽤 나 빠지게됩니다.

다음은 테이블에 국경을 추가 할 때이 더욱 분명하게, 이것은 내가 사용하고 어떤의 기본 버전, 심지어이 당신이 어떤 말더듬을 볼 수있는 JS 바이올린을 http://jsfiddle.net/LhsS4/

을합니다.

여기 여기 JQ

$(function() { 
    $('.toggleoff').hide; 
    $('.newtoggle').on('click', function() { 
     $('.toggleoff').toggle("drop", 250); 
    }); 
}); 

입니다 내가 전환의 속도를 조절하려고 한 HTML

<button class ="newtoggle" alt="Expand"> Click me </button>  

<table id="tblMainData" class="tablesorter"> 
        <thead> 
         <tr> 
          <th>1</th> 
          <th>2</th> 
          <th>3</th> 
          <th>4</th> 
          <th>5</th> 
          <th>6</th> 
          <th class="toggleoff">7</th> 
          <th>8</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>a</td> 
          <td>b</td> 
          <td>c</td> 
          <td>d</td> 
          <td>e</td> 
          <td>f</td> 
          <td class="toggleoff">g</td> 
          <td>h</td> 
         </tr> 
         <tr> 
          <td>i</td> 
          <td>j</td> 
          <td>k</td> 
          <td>l</td> 
          <td>m</td> 
          <td>n</td> 
          <td class="toggleoff">o</td> 
          <td>p</td> 
         </tr>  
     </tbody> 
       </table> 

이다 그러나 이것은 여전히 ​​해결되지 않습니다. 주요 문제는 테이블 데이터 필드 테두리가 슬라이드되지 않을 때 데이터가 중단 될 때까지 비틀 거리는 방식으로 표시되는 것을 토글하는 것입니다. 그것을 부드럽게하는 방법이 있습니까?

Answer 1

일반적으로 jquery-ui는 애니메이션에서 훨씬 잘 작동합니다. http://api.jqueryui.com/slide-effect/

jQuery UI를 코드에 추가하면 표준 jQuery 토글 기능을 사용할 때보 다 훨씬 멋진 효과를 얻을 수 있습니다. 여기

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 

은 어떻게 생겼는지의 피들러입니다 : http://jsfiddle.net/LhsS4/10/

그리고 일반적으로 내가 노력하겠다고 및 이메일로 보내기하지 않는 한 (테이블 밖으로, 레이아웃 테이블을 피하기 레이아웃을위한 사례 테이블이 이동 방법입니다). 테이블이 필요한 경우 display 속성을 사용해보십시오. 행운

https://developer.mozilla.org/en-US/docs/Web/CSS/display

http://www.vanseodesign.com/css/tables/

좋은! :)