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;
}
*/
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> </p>
</div>
<div id="imagen">
<a href="#">contenidos<br />
<span style="font-size: .8em; color: #eee;">(click aquí)</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;
});
});