Задать вопрос
@silasibiri
javascript

Как осуществить движение объекта в html с помощью JavaScript?

Я хочу осуществить плавное движение объекта в html. Я уже написал кое-какой код, который двигает резко, просто изменяет положение
тут код
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
 
<script type="text/javascript">
    function move () {
x = document.getElementById("id1").offsetLeft;
xn = x + 50;
document.getElementById("id1").style.left = xn+"px"
    }
</script>
 
 
<input type="button" value="Replace content" onclick="move()">
<img id='id1' src="res\img.png" style="position: relative;">
 
 
</body>
</html>

Но мне этого недостаточно, подскажите пожалуйста как сделать плавное перемещение.
  • Вопрос задан
  • 173 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Ну Вы перемещаете на 50 пикселей, тут как не крути - плавно не будет.

Есть 2 варианта:
Перемещать через css transition. Тогда нужно указать для этого блока transition: left 0.3s linear
Либо понизить шаг перемещения, а так же воспользоваться функцией requestAnimationFrame

P.s. ну и не зачем постоянно искать элемент через querySelector. Найдите его один раз, сохраните в переменную и пользуйтесь.
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать скрипт на Selenium (для автоматизации регистрации на сайте)
27 апр. 2024, в 13:38
30000 руб./за проект
Доработка проекта Django
27 апр. 2024, в 13:30
30000 руб./за проект
Нарисовать баннер в современном стиле
27 апр. 2024, в 13:22
600 руб./за проект
Ещё заказы