Esto es un pequeño desafío. Esto es lo que estoy buscando:
OnClick , Div 1 se desliza hacia la posición en la que estaba Div 2 (a la izquierda), Div 2 se desliza fuera de la pantalla por completo, Div 3 se desliza hacia donde estaba Div 3 (centro, centrado). Un nuevo div llega a la derecha.Intenté usar la animación jQuery y AddClass. A jQuery no le gusta deslizar un div fuera de la pantalla.
¿Alguna idea?
Para ver un ejemplo de lo que estoy describiendo, visite Groupon.com . Pensé que era una idea genial, y me he dado el desafío de recrearla. Hasta ahora, no hay dados.
-D
¿Algo como esto?
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
Esta es la funcionalidad básica. No se escala a más divs, etc., pero eso debería ayudarlo a comenzar.
La clave es envolver sus elementos en un contenedor y ocultar el desbordamiento.
Actualizar :
Aquí hay una versión ligeramente mejor que maneja cualquier cantidad de divs (mayor que 1):
http://jsfiddle.net/jtbowden/ykbgT/1/
Simplificado aún más :
http://jsfiddle.net/jtbowden/ykbgT/2/
Fragmento de código :
$('.box').click(function() { $(this).animate({ left: '-50%' }, 500, function() { $(this).css('left', '150%'); $(this).appendTo('#container'); }); $(this).next().animate({ left: '50%' }, 500); }); body { padding: 0px; } #container { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .box { position: absolute; width: 50%; height: 300px; line-height: 300px; font-size: 50px; text-align: center; border: 2px solid black; left: 150%; top: 100px; margin-left: -25%; } #box1 { background-color: green; left: 50%; } #box2 { background-color: yellow; } #box3 { background-color: red; } #box4 { background-color: orange; } #box5 { background-color: blue; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="box1" class="box">Div #1</div> <div id="box2" class="box">Div #2</div> <div id="box3" class="box">Div #3</div> <div id="box4" class="box">Div #4</div> <div id="box5" class="box">Div #5</div> </div>Quizás lo interpreté mal. Pensé que querías tres divs seguidos, y solo los que están al final deslizándose y todo eso.
(Sé que estás usando jQuery para esto, pero me molestó porque estaba tratando de forzarlo a funcionar. Tendrías que adaptar esto para tus propósitos).
Ampliando la respuesta de Jeff B , incluí Hammer.js e hice una lista circular.
$(function() { $("#esq").click(function() { console.log("Esquerda !"); var obj = $(".ativo"); $(obj).animate({ left: '-50%' }, 500, function() { $(this).css('left', '+150%'); $(this).appendTo('#container'); }); $(obj).next().animate({ left: '+50%' }, 500, function() { $(this).addClass('ativo'); $(obj).removeClass('ativo'); }); }); $("#dir").click(function() { console.log("Direita !"); var obj = $(".ativo"); var prox = $(obj).siblings(":last"); $(obj).animate({ left: '+150%' }, 500, function() { $(prox).prependTo('#container'); }); $(prox).css('left', '-50%'); $(prox).animate({ left: '+50%' }, 500, function() { $(this).addClass('ativo'); $(obj).removeClass('ativo'); }); }); var hammertime = new Hammer(document.getElementById("container")); hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL}); hammertime.on('swipeleft', function() { $("#esq").trigger("click"); }); hammertime.on('swiperight', function() { $("#dir").trigger("click"); });});
Ejemplo en: http://jsfiddle.net/tvLt1r9h/2/