Cómo lograr este efecto con Jquery

Raulmmmm · #1 (**permalink**) 20/02/2011, 14:17

x¡Hola amigos de Foros del Web!

Desde la última vez que escribí, me he llevado una gran sorpresa con el nuevo tema del foro

, es muy bonito y menos aburrido que el anterior. Ya parece más una página que un foro, y eso me gusta

.

Bueno, voy al grano, que me enrrollo. Estoy haciendo una nueva web y tengo esto:

Como veis, hay un div principal (#novedades) y dentro hay otros divs.
Y ahora llega la pregunta: quiero que cuando pinche en la flecha, desaparezcan los divs que hay dentro de novedades (los blancos), pero no todos a la vez, sino uno detrás de otro. ¿Cómo se haría?

No sé si me he explicado bien, pero creo que sí. Espero que me puedan ayudar, no sé en qué web vi ese efecto y me gustaría reproducirlo.

leif_sk8er · #2 (**permalink**) 21/02/2011, 03:05

Bueno a mi se me ocurre que si cada cuadrito de esos por ejemplo tiene la clase css .cuadrtio puedes hacer un each y en cada uno hacerle un fade out por ejemplo y despues un delay para que tarde 300 milisegundos (eso es al gusto) en hacer desaparecer el siguiente:

$(".cuadrito").each(function(){
$(this).fadeOut(slow, function(){
delay(300);
});
})

Creo que deberia funcionar bien asi, aunke no se si pasaria al siguiente cuadrito en el buclu por que se salta el delay al estar dentro de fadeOut.... igual fuera del fadeOut funciona mejor... seria probarlo.

Raulmmmm · #3 (**permalink**) 21/02/2011, 13:47

No me funciona ese código... ni tampoco este que he estado probando:

Código:

$(".abajo").click(function (){
		$('.cancion').each(function(){
			$(this).delay(300).fadeOut('slow');
		});
	});

Si pongo el delay después, se esconde el primer div, pero ninguno más. Y con el código que me diste, se ocultaban todos a la vez. ¿Cómo solucionarlo...?

De todas formas, gracias por molestarte en responder

.

masterpuppet · #4 (**permalink**) 21/02/2011, 14:09

Que tal Raulmmmm, a ver si esto te sirve:

Código Javascript:

Ver originalfunction hideNext(jq){
   jq.eq(0).fadeOut("slow", function(){
       (jq=jq.slice(1)).length && hideNext(jq);
   });
}
 
$(document).ready(function(){
    $(".abajo").click(function(e){
        hideNext($('.cancion'));
    });
});

Saludos.

marlanga · #5 (**permalink**) 21/02/2011, 16:33

Podría ser así (pincha en la V).

Código HTML:

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	</head>
	<style>
		div#contenedor { width:600px; background:blue; margin: 100 auto; }
		div.cancion { float:left; width:280px; background:yellow; height:100px; margin: 10 10; }
		div#clear { width:100%; clear:both; cursor:pointer; background:red; color:white; text-align:center; font-weight:900; }
	</style>
	<script>
		jQuery.fn.revertir = function() {
			return this.pushStack(this.get().reverse());
		};
		$(function(){
			$("div#clear").click(function(){
				var contador=0;
				$("div.cancion").revertir().each(function(){
					$(this).delay(contador).fadeOut('slow');
					contador+=300;
				});
			});
		});
	</script>
	<body>

	<div id="contenedor">
		<div class="cancion"></div>
		<div class="cancion"></div>
		<div class="cancion"></div>
		<div class="cancion"></div>
		<div class="cancion"></div>
		<div class="cancion"></div>
		<div id="clear">V</div>
	</div>
	</body>
</html>

Si tus div.cancion no están situados de forma flotante, podrias eliminar la declaración de la funcion revertir (el codigo del principio), y el .revertir() justo antes del .each().
Yo lo he puesto así porque si empiezo a eliminar el primer div, el segundo ocuparia su lugar y se queda mas feo (segun mi gusto).

Raulmmmm · #6 (**permalink**) 25/02/2011, 08:50

Muchas gracias a los dos! Al final usé el código de masterpuppet, pero funcionaban los dos

.

Muchísimas gracias!!!!