Анимировать действие
Доброго времени суток.
Есть такой код:
<script>
$('#top_img_{{ product.product_id }}').hover(function() {
my_func_{{ product.product_id }}();
});
$('#top_img_{{ product.product_id }}').click(function() {
my_func_{{ product.product_id }}();
});
function my_func_{{ product.product_id }}() {
$('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}" />');
}
</script>
Если вкратце, то он вставляет фото в нужный блок. Но делает он слишком резко. Можно ли как то анимировать это действие? Например - плавное появление (выход из opacity 0 на 1). |
img.style.opacity = 0;
let timerId = setInterval(() => {
img.style.opacity = img.style.opacity * 1 + .1;
if(img.style.opacity >= 1)clearInterval(timerId);
}, 50);
|
| Часовой пояс GMT +3, время: 09:24. |