two div content change all javascript jquery html css

javascript - div - wrap jquery



Deslice una div fuera de pantalla usando jQuery (4)

Esto es un pequeño desafío. Esto es lo que estoy buscando:

  1. 3 divs en pantalla
  2. Div 1 reside en el medio de la página (centrado)
  3. Div 2 reside justo al lado de la pantalla en el extremo izquierdo
  4. Div 3 reside justo al lado de la pantalla en el extremo derecho
  5. OnClick , Div 1 se desliza a la posición Div 2 estaba (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 una div fuera de pantalla.

¿Alguna idea?

Para un ejemplo de lo que estoy describiendo, visite Groupon.com . Pensé que era una buena idea y me di el reto de recrearla. Hasta ahora, no hay dados.

-RE


¿Algo como esto?

http://jsfiddle.net/jtbowden/ykbgT/embedded/result/

http://jsfiddle.net/jtbowden/ykbgT/

Esta es la funcionalidad básica. No escala a más divs, etc., pero eso debería comenzar.

La clave es envolver sus elementos en un contenedor y ocultar el desbordamiento.

Actualización :

Aquí hay una versión ligeramente mejor que maneja cualquier cantidad de divs (mayor que 1):

http://jsfiddle.net/jtbowden/ykbgT/1/

Simplificado 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>


Extendiendo la respuesta de Jeff B , he incluido 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/


Quizás malinterpreté. Pensé que querías tres divisiones seguidas, y solo las que estaban en el extremo deslizándose y otras cosas.

http://jsfiddle.net/acsfy/

(Sé que estás usando jQuery para esto, pero me molestó cuando intentaba forzarlo a trabajar. Tendrás que adaptar esto para tus propósitos).


Y ... no es un año demasiado tarde. Si desea que comience en el primer div, su CSS debe verse así.

#box1 { background-color:#333; } #box2 { background-color:#333; left: -50%; } #box3 { background-color:#333; left: 150%; } #box4 { background-color:#333; left: 150%; } #box5 { background-color:#333; left: 150%; }