jQuery slideUp bug?

Question

실물 모형을 위해 jQuery를 사용하고 있는데 이상한 행동을 발견했습니다. 나는 여기 누군가가 그것에 대해 밝힐 수 있기를 바라고있다.

이것은 모두 모형/테스트 코드이므로, 어리 석음을 용서하십시오. http://www.datatables.net/

내 테이블 태그는 다음과 같다 : 이제

  <table id="dexterIndex"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Col 2</th> 
        <th>Col 3</th> 
        <th>Col 4</th> 
        <th>Col 5</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Test 1</td> 
        <td>Yes</td> 
        <td>2009-2010</td> 
        <td>Fall 2010</td> 
        <td>Fall 2010</td> 
       </tr> 
       <tr> 
        <td>Test 2</td> 
        <td>No</td> 
        <td>2009-2010</td> 
        <td>Fall 2010</td> 
        <td>Fall 2010</td> 
       </tr> 
       <tr> 
        <td>Test 3</td> 
        <td>Yes</td> 
        <td>2009-2010</td> 
        <td>Fall 2010</td> 
        <td>Fall 2010</td> 
       </tr> 
       <tr> 
        <td>Test 4</td> 
        <td>No</td> 
        <td>2009-2010</td> 
        <td>Fall 2010</td> 
        <td>Fall 2010</td> 
       </tr> 
       <tr> 
        <td>Test 5</td> 
        <td>No</td> 
        <td>2009-2010</td> 
        <td>Fall 2010</td> 
        <td>Fall 2010</td> 
       </tr> 
       <tr> 
        <td>Test 6</td> 
        <td>No</td> 
        <td>2009-2010</td> 
        <td>Fall 2010</td> 
        <td>Fall 2010</td> 
       </tr> 
       <tr> 
        <td>Test 7</td> 
        <td>Yes</td> 
        <td>2008-2009</td> 
        <td>Fall 2009</td> 
        <td>Fall 2009</td> 
       </tr> 
      </tbody> 
     </table> 

, 기능 내가 갈거야

그래서 나는 내가 jQuery를 데이터 테이블 플러그인과 함께 사용하고 테이블이 for : 마우스를 올리면 행 배경색이 변경됩니다. 'x'초 이상 마우스를 가져 가면 마우스를 올리면 행의 하위 행이 아래로 슬라이드됩니다.

하나의 마우스로 행을 떠나는시 하위 행이 다시 슬라이드 : 여기

올바르게 (일반적으로) 작업 효과의 스크린 샷이다.

이 모든 것이 작동하지만 백업 할 때마다 약 1 픽셀 정도 짧아지는 것으로 보입니다. 여기에 마우스를 올려 놓기/취소 해제 한 후 이미지가 10 번 표시됩니다. 이것은 하위 행이 위로 올라간 후의 상태에있는 테이블입니다 (텍스트가없는 하위 행이 아니라는 의미입니다).

내가 fadeIn에 slideUp/slideDown을 변경하는 경우/페이드 아웃 모든 것이 잘 작동하고 내가 여분의 픽셀을하지 않습니다. (나는 아마도 페이드를 사용하여 끝날 것이지만이 행동에 대해 궁금하다.)

이

는 사파리가 도청 상태에서 DOM에 대해보고하는 것입니다 (이유는 무엇 사파리 웹 경위에 복사/붙여 넣을 수 없습니다?) :

그리고 마지막으로, 여기에 몇 가지 실수 jQuery를이다

<script language="javascript" type="text/javascript"> 
     $(document).ready(function() { 
      $('#dexterIndex').dataTable() 
      $('#dexterIndex tbody tr') 
       .hover(function() { 

        var table_row = this 
        table_row.hovering = true 
        window.setTimeout(function() { 
         if (table_row.hovering) { 
          $('.school-info').slideUp('fast', function() { 
           $(this).remove() 
          }) 
          table_row.hovering = false 
          var tr = $('<tr />').attr({'class': 'school-info',}) 
          $(table_row).after(tr) 
          $('<td />') 
           .attr({ 
            'colspan': 5 
           }) 
           .css({ 
            'display': 'none' 
           }) 
           .text("Sub Row") 
           .appendTo(tr) 
           .slideDown('fast') 
         } 

        }, 2000) 
        $(this).children().each(function() { 
         (this.oldColor === undefined)? this.oldColor = $(this).css('background-color'): null;  
         $(this).css({'background-color': '#f3ffc0'}) 
        }) 
       }, 
       function() { 
        this.hovering = false 
        $('.school-info').slideUp('fast', function() { 
         $(this).remove() 
        }) 
        $(this).children().each(function() { 
         $(this).css({'background-color': this.oldColor}) 
        }) 
       }) 
     }) 

TL : DR : slideUp은 매번 픽셀을 한 번씩 줄이고, fadeOut에는 아무런 문제가 없습니다.

누구든지이 문제에 관해 밝힐 수 있다면 크게 감사하겠습니다. 질문/아이디어

Answer 1

커플 :

그것은이 기술은 사용자가 가져 가면도가 아약스 호출에서 생성 된 얻을 않는 경우 하위 행이 계산되지 않은 것을 의미 UI/풍요 로움을 위해 사용되는 것, 그러나 데이터를 숨기거나 숨기기를하지 않고 대신 가리 키기로 생성 한 다음 나중에 제거합니다. 이것은 잠재적으로 매우 접근하기 어렵고 브라우저 스크립트에 추가 오버 헤드를 추가합니다.

그래서 나는 실제 하위 행이있는 표를로드하고 jquery를로드 중에 숨기는 것이 좋습니다. 이러한 테이블에 "sub_row"와 같은 클래스를 추가하기 만하면됩니다.

둘째, Safari에서만 이러한 현상이 발생합니까? Firefox에서 어떻게됩니까? 어느 쪽이든, 기본 테두리를 추가하는 브라우저에서 픽셀을 잃어 가고있는 것 같습니다. 이것이 각 슬라이드 업에 테두리를 계속 추가하는 이유가 무엇인지 모르겠지만 여기있는 다른 누군가가 그 점을 발견 할 수 있습니다.

마지막으로, 선택기 구문에 익숙하지 않습니다.

$('<tr />) 

및 $ (') 대신

:

$('tr') 

및

$('td') 

어떤 이유 당신은 당신의 td들과 tr의를 선택하는?