Foros del Web - Ver Mensaje Individual

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!