Есть блок, при нажатии он начинает двигаться: сначала прямо, а потом должен спускаться вниз по дуге. Я не понимаю, как сделать этот круговой спуск вниз. У меня получается, что координаты элемента меняются не по синусоиде, а просто линейно.
Пример кода ниже.
Вопросы:
- Как записать это все в одну анимацию?
- Как исправить задержки в тех местах, где не стоит delay?
- Как сделать нелинейное изменение положения элемента по осям Х и У?
$('.ring').click(function() {
$(this).delay(1500).animate({
left: 200,
},
800);
$('.ring').delay(1500).animate({
left: 400,
},
800);
$('.ring').delay(1500).animate({
left: 500,
},
800);
$('.ring').animate({
left: 580,
top: 105,
},
800);
$('.ring').animate({
left: 500,
top: 185,
},
500);
$('.ring').animate({
left: 400,
},
500);
});
.ring {
display: block;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
left: 25px;
top: 25px;
box-shadow: 0 0 8px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="ring">
</div>
options.step
в этом вариантеjQuery.animate
- api.jquery.com/animate/#animate-properties-options