jQuery slideUp錯誤？

Question

我搞亂了一些jQuery模型的東西，並注意到一些奇怪的行爲。我希望這裏有人能夠闡明一些事情。

這是所有的樣機/測試代碼，所以請原諒sl。。

所以，我有我使用結合的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> 

現在，功能我要去因爲是： 在懸停上更改行背景顏色 如果懸停時間超過'x'秒，則向下滑動該行所在行的子行。

這裏的影響工作正常（一般）截圖：

在離開該行與一個人的鼠標子行向後滑動起來。

這一切都有效，但它似乎每次滑回時都會縮短大約一個像素。這是懸停/未懸停10次後的圖像。這是子行向上滑動後的狀態表（意思是它不僅僅是沒有文字的子行）。

如果我改變效果基本show /了slideDown以淡入/淡出一切工作正常，我沒有得到額外的像素。 （我可能最終只使用淡入淡出效果，但我很好奇這種行爲）。

這是Safari是報道關於竊聽狀態DOM（也，爲什麼我不能複製/粘貼在Safari的網絡督察？）：

最後，這裏是一些草率的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 /豐富這種技術，這意味着當用戶將鼠標懸停也不獲得從Ajax調用創建的子行不計算，等等。但是你並沒有隱藏和取消隱藏數據，而是在懸停後創建它，然後將其移除。這可能非常難以訪問，並增加了瀏覽器腳本的額外開銷。

所以我建議讓表加載實際的子行，讓你的jQuery在加載時隱藏它們。您可以簡單地將「sub_row」這樣的類添加到這些表中。

二，這隻發生在Safari嗎？它發生在Firefox嗎？無論哪種方式，我想你會失去一個像素從瀏覽器添加一個默認邊框。我不知道爲什麼會在每張幻燈片上添加邊框，但我確信這裏有其他人可以發現這一點。

最後，我不熟悉你的選擇器語法。你選擇你的td S和tr S作爲：

$('<tr />) 

和 $（'）

代替：

$('tr') 

和

$('td') 

有什麼理由？