Question

I have a html table and I am trying to use the puff effect in jQuery UI to hide a specific tr

Problem is since the effect changes the position and size of the element it is applied on and in a table the position and size of other rows is affected by the position of any row in the table, when the effect plays it also moves the other rows in the table.

Is this a jQuery UI bug? Is there any workaround?

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

(The JavaScript to remove the item is called when the remove button is pressed on each cart item)

My JavaScript:

cartItem.hide("puff");

(cartItem is the tr of the cart item to remove)

And the CSS:

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

td {
    vertical-align: middle; 
}

Answer 1

This seems to achieve what you’re wanting:

$('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

This effectively clones the ‘cart-item’ table-row, appends the clone to a table and then absolutely positions that table over the element you’re wanting to remove, runs the ‘puff’ effect on the temporary/cloned elements and, after completion, hides the element.

It’s not quite as smooth as I’d like, but I’m not sure how to improve on that.