Div aparezca top y desaparezca bottom

Marcoslr87 · #1 (**permalink**) 28/07/2013, 03:02

Hola a todos, necesito la ayuda de la buena gente de este gran foro.

Necesito crear el efecto de esta página en la que, pulsando uno de los botones del menú de arriba, haga ese efecto de los div que aparecen desde arriba y desaparecen por abajo.

http://es.wix.com/website-template/view/html/fashion-frenzy

Supongo que con jquery sería posible hacer algo similar pero necesito una ayuda para empezar. Gracias por adelantado.

MarioAraque · #2 (**permalink**) 28/07/2013, 05:05

Hola Marcos

La verdad hacer ese efecto no es tan complicado como parece.
Si te fijas en el código fuente de la web verás que existen dos <div>, uno con id dialog-overlay y otro con id dialog-box.
Lo que debes hacer es un evento para que cuando se haga click en un elemento que vos quieras, aparezca y desaparezca esa ventana modal.

Separá el problema en dos partes:

1- Crear el html del popup, podés hacerlo muy fácil si copias cómo lo hicieron en el enlace de ejemplo que pasaste.
2- Crear el evento en tu fichero .js, creo que es lo más fácil de todo.

Por ejemplo hace esto:

Código HTML:

Ver original<body>
  <a href="#">Hazme click</a>
  <div id="overlay"></div> <!-- aca no pongas nada, es el overlay y debes ponerle el fondo que quieras -->
  <div id="popup-content">
      <!-- aca ponés el contenido de tu popup -->
  </div>
</body>

Y luego con JS haces lo siguiente:

Código Javascript:

Ver original$('a').click(function(){
    $('#overlay').fadeToggle();
    $('#popup-content').fadeToggle();
 
    return false;
  });

Básicamente lo que hace esto es que al hacer click oculta o muestra los div creados arriba. La posición del popup la das con CSS, por lo que no debes preocuparte de lograr esto con Javascript.

Espero que te haya servido.

Saludos.

Marcoslr87 · #3 (**permalink**) 28/07/2013, 08:10

Hola, muchas gracias por responder.

Al final he utilizado parte del contenido de esta entrada (www.forosdelweb.com/f179/mover-div-izquierda-derecha-con-boton-jquery-953308/) y además le he añadido el efecto fadeToggle que has proporcionado. Dejo el código aquí para el que le pueda resultar útil.

Código HTML:

$(document).ready(
	function(){
		$('#llamaHome').click(function efecto(){
			$('#contenedor2').animate({'top':1500+'px'});
			$('#contenedor2').fadeToggle();
			$('#contenedor1').animate({'top':0+'px'});
			$('#contenedor2').animate({'top':-1500+'px'});
			$('#contenedor2').fadeToggle();
	}
);
	
	$('#llamaAbout').click(function efecto(){
			$('#contenedor1').animate({'top':1500+'px'});
			$('#contenedor1').fadeToggle();
			$('#contenedor2').animate({'top':0+'px'});
			$('#contenedor1').animate({'top':-1500+'px'});
			$('#contenedor1').fadeToggle();
	});

});

<div id="contenedor1">
</div>
<div id="contenedor2">
</div>

De nuevo muchas gracias, continúo trabajando en el proyecto.