Quiero diseñar un formulario que se despliegue hacia abajo, que formulario o fremework me recomienda para diseñar el mio. quiero utilizar bootstrap pero no se como aplicarle a animación por así decirlo para cuando coloque el mouse en el icono o boton se me desplace el login hacia abajo, gracias de ante mano!
1 respuesta
La animación la puedes realizar con CSS puro usando @keyframes
y la propiedad animation
. Todo lo que tienes que hacer con Javascript es añadir la clase que tiene configurada la animación. Ejecuta el ejemplo para ver como funciona:
$('#btn').on('click', function(e) {
$('#box').addClass('show');
});
$('#reset').on('click', function(e) {
$('#box').removeClass('show');
});
.parent {
position: absolute;
overflow: hidden;
}
#box {
background: red;
display: block;
width: 200px;
height: 100px;
}
.hidden {
margin-top: -120px;
}
@keyframes SlideDown {
from {
margin-top: -120px;
}
to {
margin-top: 0;
}
}
.show {
animation: SlideDown 1s ease-in;
margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="btn">Mostrar</button>
<button id="reset">Reset</button>
<div class="parent">
<div id="box" class="hidden">
<p>Contenido aquí</p>
</div>
</div>
<p>Otro contenido</p>
-
si tengo un slider debajo del mi boton por que cuando le doy clic se baja mi slider y muestra un espacio prudencial para motrar el contenido , como puedo hacer para que este por encima del slider – merwil vegas el 27 jun. 18 a las 16:54
-
Si lo que quieres es esconder el contenido de atrás en lugar de desplazarlo, puedes cambiarle al elemento padre el css
position:absolute
. Actualice el ejemplo con eso. – solarc el 27 jun. 18 a las 20:39 -
pero en mi contenido el boton queda como inactivo cuando paso la position:relative a absolute. – merwil vegas el 27 jun. 18 a las 20:49
-
@merwilvegas uhmm tal vez ese contenedor padre está encima del botón y no deja hacerle click? Chequea con el inspector y crea otra pregunta con un ejemplo si no logras resolverlo. – solarc el 28 jun. 18 a las 16:08
-
ya pude resolver una parte tuve q cambiar muchas cosas ! pero ahora tengo otro problema – merwil vegas el 28 jun. 18 a las 16:11