Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Анимировать действие (https://javascript.ru/forum/misc/81474-animirovat-dejjstvie.html)

StartGames 02.12.2020 21:20

Анимировать действие
 
Доброго времени суток.
Есть такой код:
<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).

RX200 05.12.2020 21:33

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, время: 15:25.