Foros del Web » Programando para Internet » Jquery »

Animate con efecto

Estas en el tema de Animate con efecto en el foro de Jquery en Foros del Web. Buenas, estoy intentando probar una lista en la que al clickar sobre uno de los elementos se despliega otra lista con elementos. Esto me sale ...
  #1 (permalink)  
Antiguo 25/12/2016, 15:42
El_Astur
Invitado
 
Mensajes: n/a
Puntos:
Animate con efecto

Buenas,

estoy intentando probar una lista en la que al clickar sobre uno de los elementos se despliega otra lista con elementos. Esto me sale bien, pero quería probar a hacer que al clickar sobre un elemento de la lista ul se abran los elementos de la lista ol pero de uno en uno - saldría despliega1, despliega2,.. siempre con animación- y saliendo desde abajo, no lateralmente como me sale ahora. Así sucedería que al clickear sobre cualquier elemento de la lista ul se desplegarían una serie de elementos, tal como he comentado anteriormente, y se cerrarían los desplegados del anterior - esto creo que lo he logrado también con la función mouseup. No sé si la mejor forma de hacerlo es con la propiedad animate, pero es que con otras no lo he logrado por ahora tampoco. El código que tengo es:

Código:
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8" />
	<title>Pestañas</title>
	<style type="text/css">
		ul, li, p, a, ol{margin:0;padding:0;font-family: helvetica, sans-serif;box-sizing: border-box;}
		ul{
			width:100%;
			height: 3em;
			line-height: 3em;
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #666;
			color: #fff;
			text-align: center;
		}
		ul li{
			width: auto;
			display: inline-block;
			padding: 0 2%;
			font-size: 1em;
			text-transform: uppercase;
			font-weight: 800;
			letter-spacing: .1em;
			cursor: pointer;
			border-right: 1px solid #fff;
		}
		ul li:hover{
			opacity: .8;
		}
		ul li:first-child{
			border-left: 1px solid #fff;
		}
		ol{
			width:100%;
			position: absolute;
			left: 0;
			bottom: 3em;
			text-align: center;	
			color: #fff;
			display: none;	
		}
		ol li{
			width: auto;
			height: 6em;
			line-height: 6em;
			display: inline-block;
			padding: 0 1%;
			border-radius: 3px 3px 0 0;
			background-color: brown;
		}
	</style>
</head>
<body>
<ol>
	<li>despliega 1</li>
	<li>despliega 2</li>
	<li>despliega 3</li>
</ol>
<ul>
	<li>uno</li>
	<li>dos</li>
	<li>tres</li>
	<li>cuatro</li>
	<li>cinco</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>	
<script  type="text/javascript">
$(document).ready(function() {
    $('ul li').click(function() {
        $("ol").animate({
            width: "show"
        }, 1000);
    });
});
//si clickamos fuera se cierra el desplegable anterior
$(document).mouseup(function (e){
    var container = $("ol");
    if (!container.is(e.target) && container.has(e.target).length === 0){
        $(this).animate({
            width: "hide"
        });
    }
});
</script>
</body>
</html>

Etiquetas: efecto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:44.