I try to make a simplistic slideshow:
$(document).ready(function() {
$("button").on('click', function() {
$('.slide[data-slide-status="shown"]').hide('slide', {
direction: 'left'
}, function() {
$('.slide[data-slide-status="shown"]').attr("data-slide-status", "hidden")
$("#three").show('slide', {
direction: 'right'
}, function() {
$("#three").attr("data-slide-status", "shown")
})
})
});
}).slide[ data-slide-status="hidden"] {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<header class="col-12 d-flex flex-column align-items-center mb-1 mt-1">
<h1>Hello</h1>
</header>
<main class="col-12 d-flex float-none mb-1">
<section id="one" data-slide-status="shown" class="col-12 slide flex-column text-center">
<div style="background-color:blue; color:white;">
ONE
</div>
<button class="btn btn-secondary">Next</button>
</section>
<section id="three" data-slide-status="hidden" class="slide col-12 slide text-center" style="background-color:yellow;">
THREE
</section>
</main>
<footer class="text-center col-12 bg-dark text-light float-none">
Lorem Ipsum
</footer>
</body>But what I want is whilst the slide is hiding the next one to start showing. The animation that I want to achive is the section to keep going left whilst in the same time the next slide to keep going left.
Now the existing slide first and then ne next one will slide back. But I want somehow to be parallelized both animations.
Consider using Animate to move all the Slides.
$(document).ready(function() {
$("button").on('click', function() {
$("#three").attr("data-slide-status", "shown");
var d = Math.round($("main").width());
$("#one, #three").animate({
left: "-=" + d
});
});
})main.mb-1 {
width: 450px;
overflow: hidden;
}
.slide[ data-slide-status="hidden"] {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<header class="col-12 d-flex flex-column align-items-center mb-1 mt-1">
<h1>Hello</h1>
</header>
<main class="col-12 d-flex float-none mb-1">
<section id="one" data-slide-status="shown" class="col-12 slide flex-column text-center">
<div style="background-color:blue; color:white;">
ONE
</div>
<button class="btn btn-secondary">Next</button>
</section>
<section id="three" data-slide-status="hidden" class="slide col-12 slide text-center" style="background-color:yellow;">
THREE
</section>
</main>
<footer class="text-center col-12 bg-dark text-light float-none">
Lorem Ipsum
</footer>
</body>See More: https://api.jquery.com/animate/