Не работает анимация изображения
Всем привет. Хочу реализовать анимацию изображения при клике.
Вот код.
Html
<div class="product_list">
<table width="100%">
<tr>
<td valign="top" width="220px">
<img src="img/кртинка.jpg" width="200px" id="img"/>
</td>
<td>
<button class="add_cart">Добавить<span></span></button>
</td>
</div>
Jquery
$(".product_list .add_cart").click(function () {
var cart_offset = $("#cart").offset(); //получаем координаты корзины
var button_offset = $(this).offset(); //получаем координаты кнопки
var cart_img = $('#img');
cart_img
.clone()
.css({'position' : 'absolute', 'z-index' : '100','top': button_offset.top, 'left': button_offset.left})
.appendTo('.product_list')
.animate({opacity: 0.5,
marginLeft: 100,
top:cart_offset.top,
left:cart_offset.left,
width: 10,
height: 10}, 700, function() {
$(this).remove();
});
});
Анимаци должна работать, но не работает, что я делаю не так?
Проблему нашел. У меня есть css свойство главного блока position:relative;
.
И почему-то не работает position:absolute
.
Источник: Stack Overflow на русском