0
我動畫table
行上滑時刪除它們,與jquery
,這是很酷的FF,Safari和Chrome。但驚喜,驚喜......!它在IE8中不起作用。最糟糕的是,IE8不顯示任何錯誤,所以我該如何調試。jQuery的動畫()和slideUp()不工作在IE8
另外我知道table
當涉及到效果時,s是有問題的。這就是爲什麼我使用replaceWith()
將tr
替換爲div
。
這裏是我的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">£12223.00</td>
<td class="price-col">£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">£12223.00</td>
<td class="price-col">£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">£12223.00</td>
<td class="price-col">£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>
感謝您的幫助......
我試過你的解決方案,但IE8仍然沒有做任何動畫。必須有一種方法... – Shaoz 2011-04-08 08:37:49