jQuery -> toggle que salta

jesusjj · #1 (**permalink**) 13/04/2009, 07:57

Buenas tardes:

Estoy empezando a juguetear con jQuery y estoy probando el efecto toggle, para ello he realizado lo siguiente:

- una capa principal (para el ajuste)
- una capa contenedera
- una capa para el slide, fuera de la contenedora, con un position absolute y un z-index: 1

El problema está en que pretendo que la capa del slide se despliegue desde la parte superior y se desplace con el z-index, sobre el contenido, sin arrastrar a éste.

Hasta aquí está conseguido el efecto y funciona todo bien, salvo por un pequeño detalle. Resulta que cuando termina el 'despligue' del slide, éste da un pequeño saltito y me deja un margen de unos píxeles por encima. He revisado los css y la estructura del index y no he visto nada raro.

Lo más curioso del caso, es que nuestro amigo IE7, lo hace correctamente, pero tanto el CHROME, como el FIREFOX, dan ese saltito al final.

Bueno, os dejo el código, a ver si alguien ve algo.

Muchas gracias de antemano.

CSS

Código:

body {
	background: #fff;
	font-family: verdana, arial, sans-serif;
	font-size: .8em;
	margin: 0;
}

#wrappler {
	text-align: center;
	margin: auto;
	margin-top: 0;
}

#content {
	margin: auto;
	margin-top: 20px;
	border: 1px solid #555;
	background: #eee;
	width: 760px;
	height: 420px;
	padding-top: 20px; 
}

/* contenido de la capa desplegable */

#slide {
	z-index: 1;
	margin: auto;
	margin-top: 0;
	padding: 0;
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0px;
	filter:alpha(opacity=60);
	-moz-opacity:.60;
	opacity:.60;
	text-align: center;
}

#panel {
	margin: 0;
	padding: 0;
	clear: both;
	height: 70px;
	background: #555;
	display: none;
}

#imagen, #imagen a {
	background: blue;
	color: #eee;
	width: 100px;
	height: 30px;
	margin: auto;
	margin-bottom: 0;
	clear: both;
	/*border-bottom: 1px solid red;*/
	display: block;
	text-decoration: none;
}
/*
#imagen a {
	text-decoration: none;
	color: #eee;
}
*/

HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Prueba slide con jQuery</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="pruebas.js"></script>
  <link rel="stylesheet" type="text/css" href="pruebas.css" />
</head>
<body>
	<div id="slide">
			<div id="panel">
				<p>&nbsp;</p>
			</div>
			<div id="imagen">
				<a href="#">contenidos<br />
				<span style="font-size: .8em; color: #eee;">(click aqu&iacute;)</span></a>
			</div>
		</div>
	<div id="wrappler">
		<div id="content">
			<span>probando</span>
		</div>
	</div>
</body>
</html>

JS

Código:

// JavaScript

$(document).ready(function(){
	
	$("#imagen").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active");
		return false;
	});
	
});

jesusjj · #2 (**permalink**) 13/04/2009, 12:27

Buenas tardes:

Añado, que tras probarlo en IE8, con eso de que empieza a ser más estándar, hace el mismo saltito.

Saludos.

jesusjj · #3 (**permalink**) 13/04/2009, 12:33

Bueno, solucionado, el problema venía de:

Cita:

Parece ser que no le molan los párrafos, al menos como lo he puesto yo.

Espero que os sirva de algo al menos.

Saludos.