@urajo

Как сделать зацикленную анимацию движения?

Нужно сделать зацикленную анимацию движение вверх и вниз?
Сделать переменную в которой условно указывать направление?
$(document).ready(function(){
	let verticle = 50,
		speed = 10;
	if($('div').is('#ghoust')){
		function ghoustMove(){
			verticle++;
			if(){
				$('#ghoust').css({'bottom' : verticle});
			}
		}

		setInterval(ghoustMove, speed);
	}
});
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ответы на вопрос 2
@ArtJH
Напишите анимацию на css. Так намного экономней и легче
Ответ написан
8XL
@8XL
Я высокий, но ниже, чем вы подумали.
Добрый день.
Могу ошибаться, но в вашем случае анимация работает только вверх, значит нужно ввести какие-то ограничения.
Полагаю, стоит попробовать добавить условие, например
if(vertical >= document.height){
  vertical++
} else {
  vertical--
}


Таким образом элемент будет подниматься до высоты документа(играет роль позиционирование элемента. в вашем случае его позиционирование рассчитывается от bottom), и достигнув её, опускаться обратно.

Второе, что не является ошибкой, но считается более верной практикой:
меняйте не bottom в стиле, а transform: translateY('значение').

Третье, как уже вам посоветовали, действительно гораздо проще зациклить анимацию в CSS.
#ghost{
 position: absolute;
 bottom: 50px;
 animation: movement 10s linear infinite;

@keyframes movement{
  50% {
    transform: translateY(100px)
  }
  100%{
    transform: translateY(0)
  }
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы