jQuery的動畫（）和slideUp（）不工作在IE8

Question

我動畫table行上滑時刪除它們，與jquery，這是很酷的FF，Safari和Chrome。但驚喜，驚喜......！它在IE8中不起作用。最糟糕的是，IE8不顯示任何錯誤，所以我該如何調試。

另外我知道table當涉及到效果時，s是有問題的。這就是爲什麼我使用replaceWith()將tr替換爲div。

這裏是我的jQuery：

$('.remove').live('click', removeRowSlider); 

function removeRowSlider(e){ 
    var thisElem = $(this); 

    if(thisElem.hasClass('remove')){ 
    var tr = thisElem.closest('tr').parents('tr'), 
      supportDiv = $('<div style="height: 30px; width: 470px">').css({'height': tr.height()}); 

    tr.animate({'opacity': 0.2}, function(){ 
     tr.replaceWith(supportDiv); 

     supportDiv.slideUp(400, function(){ 
      $(this).remove();    
     }); 

    }); 

    } 

    e.preventDefault(); 
} 

HTML：

<table> 
    <thead> 
    <tr> 
     <th class="first-td">Item(s)</th> 
     <th class="qty-col">Qty</th> 
     <th class="price-col">Price</th> 
     <th class="price-col">Subtotal</th> 
     <th class="del-opt">Delivery options</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td colspan="4"> 
     <table> 
      <tr> 
      <td class="first-td"> 
       <img src="../assets/product-image.jpg" alt="product image" /> 
       <div class="prod-desc-col"> 
       <h3>Samsung LE40C580J1 LCD HD 1080p </h3> 
       </div> 
      </td> 
      <td class="qty-col"> 
       <input type="text" value="1" /> 
       <a href="#" title="Update" class="update">Update</a> 
       <a href="#" title="Remove" class="remove">Remove</a> 
      </td> 
      <td class="price-col">&pound;12223.00</td> 
      <td class="price-col">&pound;12223.00</td> 
      </tr> 
     </table> 
     </td> 
     <td> 
     <ul class="font-small"> 
      <li class="coll-store"> 
      <p>Collect from store</p> 
      </li> 
      <li class="uk-del"> 
      <p>Delivery to UK</p> 
      </li> 
     </ul> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
     <table> 
      <tr> 
      <td class="first-td"> 
       <img src="../assets/product-image.jpg" alt="product image" /> 
       <div class="prod-desc-col"> 
       <h3>Samsung LE40C580J1 LCD HD 1080p </h3> 
       </div> 
      </td> 
      <td class="qty-col"> 
       <input type="text" value="1" /> 
       <a href="#" title="Update" class="update">Update</a> 
       <a href="#" title="Remove" class="remove">Remove</a> 
      </td> 
      <td class="price-col">&pound;12223.00</td> 
      <td class="price-col">&pound;12223.00</td> 
      </tr> 
     </table> 
     </td> 
     <td> 
     <ul class="font-small"> 
      <li class="coll-store"> 
      <p>Collect from store</p> 
      </li> 
      <li class="uk-del"> 
      <p>Delivery to UK</p> 
      </li> 
     </ul> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
     <table> 
      <tr> 
      <td class="first-td"> 
       <img src="../assets/product-image.jpg" alt="product image" /> 
       <div class="prod-desc-col"> 
       <h3>Samsung LE40C580J1 LCD HD 1080p </h3> 
       </div> 
      </td> 
      <td class="qty-col"> 
       <input type="text" value="1" /> 
       <a href="#" title="Update" class="update">Update</a> 
       <a href="#" title="Remove" class="remove">Remove</a> 
      </td> 
      <td class="price-col">&pound;12223.00</td> 
      <td class="price-col">&pound;12223.00</td> 
      </tr> 
     </table> 
     </td> 
     <td> 
     <ul class="font-small"> 
      <li class="coll-store"> 
      <p>Collect from store</p> 
      </li> 
      <li class="uk-del"> 
      <p>Delivery to UK</p> 
      </li> 
     </ul> 
     </td> 
    </tr> 
    </tbody> 
</table> 

感謝您的幫助......

Answer 1

當涉及到IE，也不會讓我驚奇！ 我不知道這是否適用於您的示例，但有時遇到了附加元素而沒有結束標記的問題。所以你可以試試這個：

supportDiv = $('<div style="height: 30px; width: 470px;"></div>')... 

希望它適合你！