Использование jQuery UI Puff Hide в строке таблицы ведет себя плохо

Question

У меня есть html table, и я пытаюсь использовать эффект затяжки в пользовательском интерфейсе jQuery, чтобы скрыть определенный tr

Проблема в том, что эффект изменяет положение и размер элемента, к которому он применяется, а в таблице на положение и размер других строк влияет положение любой строки в таблице, когда эффект воспроизводится, он также перемещается остальные строки в таблице.

Это ошибка в jQuery UI? Есть ли обходной путь?

Вот мой HTML:

<table>
    <tr class='cart-item'>
         <td><img class='picture' src='1.jpg'></td>
         <td>Product</td>
         <td class='price'>$25</td>
         <td><a class='remove' href='cart/remove/1' name='1'>X</a></td>
    </tr>

    <tr class='cart-item'>
         <td><img class='picture' src='2.jpg'></td>
         <td>Product</td>
         <td class='price'>$25</td>
         <td><a class='remove' href='cart/remove/2' name='2'>X</a></td>
    </tr>

    <tr class='cart-item'>
         <td><img class='picture' src='3.jpg'></td>
         <td>Product</td>
         <td class='price'>$25</td>
         <td><a class='remove' href='cart/remove/3' name='3'>X</a></td>
    </tr>
</table>

(JavaScript для удаления элемента вызывается при нажатии кнопки удаления на каждом элементе корзины)

Мой JavaScript:

cartItem.hide("puff");

(cartItem - это tr элемента корзины, который нужно удалить)

И CSS:

table {
    width: 90%; 
    margin: 40px;

td {
    vertical-align: middle; 
}

Answer 1

Это похоже на то, что вы хотите:

$('a.remove').click(function(e) {
    e.preventDefault();
    cartItem = $(this).closest('tr.cart-item');
    newCartItem = $('<table />').append($(cartItem).clone().wrap('<table></table>'))
    console.log(newCartItem);

    newCartItem.appendTo('body').css({
        'position': 'absolute',
        'top': cartItem.offset().top,
        'left': cartItem.offset().left,
        'background-color': 'red'
    });

    cartItem.fadeOut(

    function() {
        newCartItem.hide('puff');
    });
});

JS Fiddle demo

Это эффективно клонирует строку таблицы 'cart-item', добавляет клон в таблицу и затем абсолютно позиционирует эту таблицу над элементом, который вы хотите удалить, запускает эффект 'puff' для временных / клонированных элементов и, после завершения, скрывает элемент.

Это не так гладко, как хотелось бы, но я не уверен, как это улучшить.