Блог

Я анимирую table строки для перемещения вверх при их удалении с помощью jquery , что отлично работает в FF, Safari и Chrome. Но сюрприз, сюрприз …!! Это не работает в IE8. Хуже всего то, что IE8 не показывает никаких ошибок, так как же я должен отлаживать.

Также я знаю, table что они проблематичны, когда дело доходит до эффектов. Вот почему я заменил tr на div using replaceWith() .

Вот мой 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">amp;pound;12223.00</td>
            <td class="price-col">amp;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">amp;pound;12223.00</td>
            <td class="price-col">amp;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">amp;pound;12223.00</td>
            <td class="price-col">amp;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>
  

Спасибо за вашу помощь…

Когда дело доходит до IE, меня ничто не удивляет! Я не знаю, работает ли это в вашем примере, но иногда у меня возникали проблемы с добавлением элементов без конечного тега. Итак, вы могли бы попробовать это:

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

Надеюсь, у вас все получится!