This survey is designed to assist individuals in determining where they should go with a specific type of ticket.
Currently, everything is functioning smoothly, but I would like to add a sleek animation to each ul transition.
Whenever a button is clicked, the old ul will fade-out to the left while the new ul fades-in from the right. If the Back button is pressed, the opposite animation will occur when returning to the previous ul.
At the moment, I am utilizing animations from . Is there a way to control these animations using jQuery, or would it be more effective to create the animations solely with jQuery?
$(document).ready(function() {
$(".tab a").click(function() {
$(this).parent().addClass("active").siblings(".active").removeClass("active");
var tabContents = $(this).attr("href");
$(tabContents).addClass("active").siblings(".active").removeClass("active");
return false;
setTimeout(function() {
q_list.eq(num).addClass("left");
setTimeout(function() {
q_list.eq(num).hide();
q_list.eq(num + 1).show();
btn.removeClass("click");
setTimeout(function() {
q_list.eq(num + 1).removeClass("right");
num++
}, 1000);
}, 360);
}, 260);
});
$("button").on("click", function() {
let currentLevel = $(this).closest('.tab').attr('data-level');
let prevLevel = parseInt(currentLevel) - 1;
$('.tab').removeClass("active");
$(`.tab[data-level=${prevLevel}]`).eq(0).addClass('active')
});
});.question_wrapper {
display: flex;
justify-content: center;
}
ul {
list-style: none;
border: 1px solid black;
text-align: center;
padding-left: 0;
width: 40rem;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.buttons {
display: flex;
justify-content: space-around;
}
.yes_part,
.no_part {
display: flex;
flex-direction: column;
}
.yes_part {
padding-right: 2rem;
}
a.yes {
background-color: #FFB8B8;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
a.no {
background-color: #B1E0FF;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
.ticket_type {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-bottom: 10px;
}
.ticket_type a {
padding: 10px 30px;
border: 1px solid black;
border-radius: 10px;
margin: 10px;
}
.answer_1 {
display: flex;
flex-direction: column;
}
.store_place_1,
.store_place_2 {
display: flex;
}
.store_1,
.store_2,
.store_3,
.store_4,
.store_5 {
text-decoration: none;
color: black;
}
a {
text-decoration: none;
color: black;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<section class="question_wrapper">
<ul class="tab main-tab active animate__animated animate__fadeInRight" data-level='1'>
<li class="active">
<p>Do you have a ticket ?</p>
<div class="buttons">
<div class="yes_part">
<img src="yes.png" alt="">
<a class="yes" href="#tab1">yes</a>
</div>
<div class="no_part">
<img src="no.png" alt="">
<a class="no" href="#tab2">no</a>
</div>
</div>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab1" data-level='2'>
<li>
<p>Which Ticket do you have ?</p>
<div class="ticket_type">
<a href="#tab3">Type 1</a>
<a href="#tab3">Type 2</a>
<a href="#tab3">Type 3</a>
<a href="#tab4">Type 4</a>
<a href="#tab4">Type 5</a>
<a href="#tab5">Type 6</a>
</div>
<button type="button">Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab2" data-level='2'>
<li>
<p>You can buy the ticket from here.</p>
<div class="store_place_1">
<a href="#">
<div class="store_1">
<p>Store 1</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_2">
<p>Store 2</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_3">
<p>Store 3</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<div class="store_place_2">
<a href="#">
<div class="store_4">
<p>Store 4</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_5">
<p>Store 5</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<button>Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab3" data-level='3'>
<li>
<div class="answer_1">
<p>Please go to hall A</p>
<img src="receptionist.png" alt="">
<button>Back</button>
</div>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab4" data-level='3'>
<li>
<p>Please go to hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab5" data-level='3'>
<li>
<p>Please go to hall C</p>
<button>Back</button>
</li>
</ul>
</section>