[SOLUCIONADO] "Slide" de divs no funciona

lucastosellolatini · #1 (**permalink**) 10/10/2014, 05:39

Hola gente,
Mi idea es que al hacer click en el boton el div se desplace para el costado pero no se que es lo que estoy haciendo mal y porque el codigo no funciona.

Código:

$(document).on("ready", listo);
function listo () 
{
	$("#sigUno").on("click", mover);
}

function mover () 
{
	var cambiaLeft =
	{
		left: -100%
	}
	$("#contenidoservicios").css("cambiaLeft");
}

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>asdl</title>
</head>
<body>
<section id="servicios">
			<div id="contenidoservicios">
				<div id="titulo">
					<h3>SERVICIOS</h3>
					<span id="sigUno">></span>
				</div>
				<div id="grafico">
					<span id="atrasUno"><</span>
					<div id="contenidograf">
						<br>
						<div id="logos">
							
						</div>
						<div id="folletos">
							
						</div>
						<div id="revistas">
							
						</div>
						<div id="editorial">
							
						</div>
						<div id="viapublica">
							
						</div>
					</div>
					<span id="sigDos">></span>
				</div>
				<div id="animaciones">
					<span id="atrasDos"><</span>
					<h3>Animaciones</h3>
				</div>
			</div>
		</section>
</body>
</html>

Código:

#servicios{
	height: 100%;
	background: radial-gradient(ellipse at center, rgba(220,140,8,1) 0%, rgba(180,100,8,1) 100%);
}

#servicios #contenidoservicios{
	width: 300%;
	height: 100%;
	left: -100%;
}

#servicios #contenidoservicios #titulo{
	height: 100%;
	float: left;
	width: 33.333333333333%;
	text-align: left;
}

#servicios #contenidoservicios #titulo h3{
	width: 86%;
	margin: 19% auto auto 5%;
	font-size: 6em;
	color: rgba(0,0,0,0.4);
	float: left;
	text-align: center;
}

#servicios #contenidoservicios #titulo #sigUno{
	float: left;
	margin-top: 16%;
	font-size: 10em;
	color: rgba(255,255,255,0.1);
	display: block;
	font-weight: bolder;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	width: 7%;
	margin-right: 2%;
}

#servicios #contenidoservicios #titulo #sigUno:hover{
	color: rgba(0,0,0,0.4);
}

#servicios #contenidoservicios #grafico{
	height: 100%;
	float: left;
	width: 33.333333333333%;
	text-align: left;
}

#servicios #contenidoservicios #grafico #contenidograf{
	width: 82%;
	margin: auto;
	font-size: 5em;
	color: rgba(0,0,0,0.4);
	float: left;
	text-align: center;
	height: 100%;
}

#servicios #contenidoservicios #grafico #contenidograf div{
	width: 27%;
	display: inline-block;
	height: 32%;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.1;
	transition: all 0.3s ease-in-out;
	cursor: crosshair;
}

#servicios #contenidoservicios #grafico #contenidograf div:hover{
	opacity: 0.5;
	transform: scale(1.1);
}

#servicios #contenidoservicios #grafico #contenidograf #logos:hover{
	opacity: 0.4;
	transform:	rotate(360deg);
}

#servicios #contenidoservicios #grafico #contenidograf #logos{
	background-image: url('../img/logos.png');
}

#servicios #contenidoservicios #grafico #contenidograf #folletos{
	background-image: url('../img/folletos.png');
	background-size: 70%;
}

#servicios #contenidoservicios #grafico #contenidograf #revistas{
	background-image: url('../img/revistas.png');
	background-size: 35%;
}

#servicios #contenidoservicios #grafico #contenidograf #editorial{
	background-image: url('../img/editorial.png');
	background-size: 40%;
}

#servicios #contenidoservicios #grafico #contenidograf #viapublica{
	background-image: url('../img/viapublica.png');
	background-size: 100%;
	margin-right: 12%;
}


#servicios #contenidoservicios #grafico #sigDos{
	float: left;
	margin-top: 16%;
	font-size: 10em;
	color: rgba(255,255,255,0.1);
	display: block;
	font-weight: bolder;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	width: 7%;
	margin-right: 2%;
}

#servicios #contenidoservicios #grafico #sigDos:hover{
	color: rgba(0,0,0,0.4);
}

#servicios #contenidoservicios #grafico #atrasUno{
	float: left;
	margin-top: 16%;
	font-size: 10em;
	color: rgba(255,255,255,0.1);
	display: block;
	font-weight: bolder;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	width: 7%;
	margin-left: 2%;
}

#servicios #contenidoservicios #grafico #atrasUno:hover{
	color: rgba(0,0,0,0.4);
}

#servicios #contenidoservicios #animaciones{
	height: 100%;
	float: left;
	width: 33.333333333333%;
	text-align: left;
}

#servicios #contenidoservicios #animaciones h3{
	width: 86%;
	margin: 20% 5% auto auto;
	font-size: 5em;
	color: rgba(0,0,0,0.4);
	float: left;
	text-align: center;
}

#servicios #contenidoservicios #animaciones #atrasDos{
	float: left;
	margin-top: 16%;
	font-size: 10em;
	color: rgba(255,255,255,0.1);
	display: block;
	font-weight: bolder;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	width: 7%;
	margin-left: 2%;
}

#servicios #contenidoservicios #animaciones #atrasDos:hover{
	color: rgba(0,0,0,0.4);
}

Ahi les dejo el codigo de esa parte... espero puedan ayudarme y se entienda lo que quise hacer.

Saludos!

diurno10 · #2 (**permalink**) 10/10/2014, 06:53

Buenas , y si probas con algo asi

Código:

$(document).ready(function(){
	$("#sigUno").on("click", function(){
		$("#titulo").hide();
		$("#titulo").next().css("margin-left","-1400px");
	})	
});

Probalo y me contas.

PD: si estas pensando hacer un slide, yo quitaria los botones del contenedor general.

lucastosellolatini · #3 (**permalink**) 10/10/2014, 08:32

Hola diurno, gracias por contestar....

Mi idea es mas o menos esta:

Que al estar en #titulo y hacer click en el boton #sigUno, el #contenedorservicios mueva su margen-left a -100%, para que de esta manera quede visible en pantalla #grafico.

Por ahora del a manera que lo solucione es con este código:

Código Javascript:

Ver original$(document).on("ready", listo);
function listo () 
{
    $("#sigUno").on("click", cambiarUno);
    $("#sigDos").on("click", cambiarDos);
    $("#atrasUno").on("click", cambiarTres);
    $("#atrasDos").on("click", cambiarCuatro);
}
 
function cambiarUno () 
{
    $("#titulo").fadeOut("fast");
}
 
function cambiarDos () 
{
    $("#grafico").fadeOut("fast");
}
 
function cambiarTres () 
{
    $("#titulo").fadeIn("fast");
}
 
function cambiarCuatro () 
{
    $("#grafico").fadeIn("fast");
}

Pero así no logro el slide que te conté, si no que desaparzca y aparezcan.

No se porque no ocurre el movimiento que yo quiero, quiero que se vea como se va para el costado el contenedor #titulo y aparece #grafico.... todo, moviendo el contenedor padre #contenidoservicios.

Gracias por tu respuesta!

Saludos.

diurno10 · #4 (**permalink**) 10/10/2014, 09:55

probalo asi

Código:

$(document).ready(function(){
	$("#sigUno").on("click", function(){
		$("#titulo").animate({marginLeft:'-750px'},"slow");		
		$("#titulo").next().animate({marginLeft:'-450px'},"slow");		
		
	})	
});

las distancias -750 y -450 acomodalas a tu gusto

lucastosellolatini · #5 (**permalink**) 14/10/2014, 05:05

Muchas gracias por tu ayuda diurno!!! Mi error era que escribia "margin-left" en vez de escribir "marginLeft"

Salduos!