jQuery animate（）和slideUp（）在IE8中不起作用

Question

I'm animating table rows to slide up when deleting them, with jquery , which is cool in FF, Safari and Chrome. But surprise, suprise...!! It doesn't work in IE8. The worst thing is that IE8 doesn't show any error, so how am I supposed to debug.

Also I know table s are problematic when it comes to effects. That's why I replaced tr with a div using replaceWith() .

Here's my 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>

Thanks for your help...

Answer 1

When it comes to IE, nothing surprises me! I don't know if this works with your example, but sometimes I've had problems appending elements without an end-tag. So you could try this:

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

Hope it works out for you!