Estoy creando un "megamenú" que tiene grandes paneles que se deslizan hacia adentro y hacia afuera debajo de la navegación. El problema al que me enfrento es hacer que los paneles se deslicen en la dirección en función de si el enlace en el que se hizo clic está antes o después del enlace actualmente visible (por lo que si hace clic en un enlace que viene después del enlace actualmente visible, el panel actual debería deslizarse fuera del pantalla hacia la izquierda y el nuevo panel debe deslizarse desde la derecha). Si hace clic en los enlaces en orden, funciona como se desea, pero cuando comienza a hacer clic en los enlaces desordenados, la dirección de la diapositiva se desordena.
$('.navigation a').click(function(e) { e.preventDefault(); var prevPanel = $('.navigation a.active').attr('data-panel'); var currPanel = $(this).attr('data-panel'); $('.panel').removeClass('active'); if (currPanel > prevPanel) { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } else { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } $('.navigation a').removeClass('active'); $(this).addClass('active'); }); body,html { overflow:hidden; } .navigation { text-align:center; } .panel { width:100%; height:200px; position:absolute; left:100%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .panel.active { left:0; } .panel-1 { background:red; } .panel-2 { background:green; } .panel-3 { background:blue; } .panel-4 { background:orange; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <a href="#" data-panel="1" class="active">Panel 1</a> <a href="#" data-panel="2">Panel 2</a> <a href="#" data-panel="3">Panel 3</a> <a href="#" data-panel="4">Panel 4</a> </div> <div class="panel-container"> <div class="panel panel-1 active">Panel 1 content</div> <div class="panel panel-2">Panel 2 content</div> <div class="panel panel-3">Panel 3 content</div> <div class="panel panel-4">Panel 4 content</div> </div>Todo lo que tenía que hacer era restablecer el posicionamiento antes de realizar la animación de deslizamiento.
$('.navigation a').click(function(e) { e.preventDefault(); var prevPanel = $('.navigation a.active').attr('data-panel'); var currPanel = $(this).attr('data-panel'); $('.panel').removeClass('active'); if (currPanel > prevPanel) { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } else { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } // reset positioning $(".panel:lt("+ (currPanel - 1) +")" ).css('left','-100%'); $(".panel:gt("+ (currPanel - 1) +")" ).css('left','100%'); // continue $('.navigation a').removeClass('active'); $(this).addClass('active'); }); body,html { overflow:hidden; } .navigation { text-align:center; } .panel { width:100%; height:200px; position:absolute; left:100%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .panel.active { left:0; } .panel-1 { background:red; } .panel-2 { background:green; } .panel-3 { background:blue; } .panel-4 { background:orange; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <a href="#" data-panel="1" class="active">Panel 1</a> <a href="#" data-panel="2">Panel 2</a> <a href="#" data-panel="3">Panel 3</a> <a href="#" data-panel="4">Panel 4</a> </div> <div class="panel-container"> <div class="panel panel-1 active">Panel 1 content</div> <div class="panel panel-2">Panel 2 content</div> <div class="panel panel-3">Panel 3 content</div> <div class="panel panel-4">Panel 4 content</div> </div>