Задать вопрос
@StarlightToster

Как очистить очередь анимаций?

Здравствуйте, я попытался сделать так, чтобы в зависимости от того, в какую сторону экрана наводится курсор, в такую сторону отклоняется моя "карточка" и сверху выпадает определённый вариант ответа, но если быстро водить курсором туда сюда, то очень долгое время варианты ответа идут один за другим, что выглядит не совсем красиво. Как мне это исправить? (я пробовал .stop() и .clearQueue(), но с ними у меня ничего дельного не получилось (не отрицаю того, что мог использовать их неправильно)

HTML:
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="game-wrap">
		<div id="canvas">
			<div class="game__action">
				<div id="cardAnswer" class="cardAnswer">
					<p class="pAnswer">abc</p>
				</div>
				<div id="cardAnswer1" class="cardAnswer">
					<p class="pAnswer">cba</p>
				</div>
			</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<script type="text/javascript">
		$("#cardAnswer").hide();
		$("#cardAnswer1").hide();

		$("body").mousemove(function(e){
					var coord = e.pageX;	
					if (coord > (Number((Number(window.innerWidth))/2)+200)){
						$(".game__action").get(0).style.transform = "rotate(10deg)"	;
						$("#cardAnswer1").slideDown(500);
					}
					else if (coord < (Number((Number(window.innerWidth))/2)-200)){
						$(".game__action").get(0).style.transform = "rotate(-10deg)";
						$("#cardAnswer").slideDown(500);	
					}
					else{
						$(".game__action").get(0).style.transform = "rotate(0deg)";
						$("#cardAnswer1").slideUp(500);
						$("#cardAnswer").slideUp(500);
					}
		});
	</script>
</body>
</html>

CSS:
#canvas {
	width: 460px;
	margin: auto;
}

.game-wrap {
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
}

.game__action {
	background: #313131;
	margin-top: 50px;
	height: 640px;
	color: #fff;
    transform-origin: 50% 100% 0;
    transform: rotate(0deg);
    transition: transform 1s;
}

.cardAnswer{
	height: 125px;
	width: 100%;
	background-color: #7E7E7E;
	display: flex;
    justify-content: center; 
    align-items: center;
    position: absolute;
	left: 0;
	top:  0;
}
  • Вопрос задан
  • 63 просмотра
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы