0

Хочу сделать плавное смещение изображения на определенное количество пикселей при нажатии, моментальное перемещение уже написал, теперь хочу сделать плавное, чтобы можно было скорость движения указать. Как это лучше сделать?

<div style="position: relative">
<img id="imgid" style="position: absolute; left: 10px" src="images/img.png">
</div>

<a href="" id="knopka">Переместить изображение</a>

<script>
knopka.onclick = function() {
var leftImage = 100;
document.getElementById("imgid").style.left = leftImage + 100 + 'px';
}
</script>
1

1 ответ 1

2

Используйте transition

#imgid {
  transition: left 0.5s ease;
}

0.5s - время. Чем больше, тем медленнее движется.

А вообще, если по хорошему, не стоит двигать блок таким образом, это вызывает перерисовку страницы. Лучше использовать css трансформации

10
  • Не понял немного. Куда эту часть кода писать то?
    – Holter
    3 июл 2018 в 11:34
  • @Holter, в css файл. Если такого не имеется, то в style.
    – Hikikomori
    3 июл 2018 в 11:49
  • Извините, я Вас не понял. У меня в функции js прописано смещение, при нажатии картинка смещается, но хотелось бы чтобы она двигалась плавно. Как мне совместить css с функцией?
    – Holter
    3 июл 2018 в 12:22
  • @Holter,у вас для imgid уже прописаны стили в атрибуте style. Добавьте transition туда
    – Hikikomori
    3 июл 2018 в 12:30
  • Дело в том, что transition на определенный id устанавливается и только в одно сторону как я понимаю.
    – Holter
    3 июл 2018 в 12:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.