Question

我有一个html table，我试图在jQuery UI中使用puff效果来隐藏特定的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'效果并在完成后隐藏元素。

它并不像我想的那么顺利，但我不确定如何改进。

使用jQuery UI Puff隐藏在表的一行上行为不端

1 个答案: