Здравствуйте! Нужна помощь знающих людей, мои знания JS близятся к нулю, я уже просто сломал себе всю голову)
Суть проблемы такая:
Есть два блока (div), один из них изначально скрыт за границами экрана.
При нажатии на кнопку, видимый блок улетает в правую сторону за экран, а скрытый вылетает слева на его место.
С самой анимацией проблем нет и даже удаётся запускать её по клику на кнопку, но только один раз, повторное нажатие не срабатывает (т.е. нужно перезапускать анимацию каждый раз).
Главная же проблема, как при нажатии на другую кнопку запустить эту же анимацию в обратную сторону? Т.е. чтобы блоки вставали в изначальное положение.
Для наглядности ТУТ можно посмотреть достигнутый мной результат. Блок "Заполните заявку", чуть ниже середины страницы, кнопка справа в этом блоке. Вот код который я использовал:
HTML:
<div class="zakaz-form switch-form">Содержимое 1-го блока + 1-я кнопка</div>
<div class="cons-form switch-form">Содержимое 2-го блока + 2-я кнопка</div>
Анимация CSS:
.zakaz-form{
animation: switch-zakaz forwards 3s;
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@keyframes switch-zakaz {
0% {
opacity: 1;
left: 0;
}
20% {
opacity: 1;
left: 0;
}
100% {
opacity: 0;
left: 95%;
}
}
.cons-form{
animation: switch-cons forwards 3s;
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@keyframes switch-cons {
0% {
opacity: 0;
left: -1000px;
}
80% {
opacity: 1;
left: calc(50% - 275px);
}
100% {
opacity: 1;
left: calc(50% - 275px);
}
}
.start-anim {
-webkit-animation-play-state:running;
animation-play-state:running;
}
JS - старт анимации по клику на кнопку:
jQuery(document).ready(function($){
$(function(){
$('.cons-button').click(function(){
$('.switch-form').toggleClass('start-anim');
});
});
});
Заранее благодарю за любую помощь!
UPD: [Пример неполного решения] - при нажатии на кнопку "Показать первый блок", нужно чтобы анимация запускалась в обратную сторону.