Intento hacer una presentación de diapositivas simplista:
$(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>Pero lo que quiero es que, mientras la diapositiva oculta, la siguiente comience a mostrarse. La animación que quiero lograr es la sección para continuar hacia la izquierda y al mismo tiempo la siguiente diapositiva para continuar hacia la izquierda.
Ahora la diapositiva existente primero y luego la siguiente se deslizará hacia atrás. Pero quiero que de alguna manera se paralelicen ambas animaciones.
Considere usar Animate para mover todas las diapositivas.
$(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>Ver más: https://api.jquery.com/animate/