Problema con slideToggle (jQuery)

unodoscuatro · #1 (**permalink**) 26/09/2012, 13:55

Que tal, bueno escribo para pedir su ayuda ya que tengo un proyecto web y el tengo un formulario oculto el cual al dar click en un boton, se desliza de la parte superior de la pagina, lo que pasa es que devido a las propiedades css position, antes de que se deslize del todo, ya muestra algunos divs y da mal aspecto, asi que mi pregunta es si existe una regla css.. o alguna forma de solucionarlo?
html:

Código HTML:

<body>
	<div id="contenedor" class="limpiar">
    	<div id="header" class="limpiar">
        <!-- Inicia el form Oculto-->
    		<div id="formOculto" class="limpiar">
            	<div id="contenidoCajafo">
                        <h1>Bienvenido a <strong>HomelesZ</strong></h1>
                    <p>La web que te entiende!</p>
                  <p>Aun no eres un <b>Homelesz?</b> Pues que esperas <b><a href="registro.php">Registrate!</a></b></p>
                </div>
            	<div id="loginBox">
                	<label for="nick">HomelesZ id:</label><br/>
                    <input type="text" name="nick" id="nick" /><br/>
                    <label for="passwd">Password:</label><br/>
                    <input type="password" name="passwd" id="passwd" /><br/>
                    <button type="button" id="entrar">Entrar!</button>
                </div>
                <div id="quienesSomos">
                	<p><a href="somos.php">Quienes Somos?-</a></p>
                </div>
            </div>
		<!-- Termina el Form Oculto -->
		
        <!-- Inicia el toolbar-->
        <div id="toolbar">
        	<div id="banner">
            	<p><img id="banner1" src="img/logo.png" alt="HomelesZ" title="Home"/></p>
            </div>
            <div id="funciones">
            	<ul>
                	<li id="registrar"><p>Unete a los HomelesZ</p></li>
                    <p id="separador">|</p>
                    <li id="logear"><p>Entrar</p></li>
                </ul>
            </div>
        </div>	
        <!-- Termina el Toolbar-->
        </div>
    	
        <div id="contenido">
        </div>
        
        <div id="footer">
        </div>
    </div>

el css:

Código:

#contenedor{
	position:relative;
	width:100%;
}
#formOculto{
	display:none;
	background:#1e1e1e;
	height:200px;
}
#contenidoCajafo{
	margin:15px;
	float:left;
	text-align:center;
}
#contenidoCajafo h1{
	text-align:center;
	color:#ad0d0d;
	font-size:36px;
	font-weight:bold;
	font-family:Geneva, sans-serif;
}
#contenidoCajafo p{
	margin:15px;
	font-size:20px;
	text-align:right;
	color:#cdd3e9;
	}
#contenidoCajafo a{
	text-decoration:none;
	}
#loginBox{
	position:absolute;
	left:70%;
	color:#cdd3e9;
	font-weight:bold;
	font-size:17px;
	margin-top:25px;
	padding:10px;
	float:left;
	text-align:center;
	width:200px;
	border: 3px solid #ad0d0d;
	border-radius: 0px 0px 15px 15px;
}
#quienesSomos{
	position:absolute;
	top:165px;
	left:20%;
	font-size:20px;
	color:#BD1311;
}
#quienesSomos a{
	color:#BD1311;
	text-decoration:underline;
}
#toolbar{
	height:50px;
	background:#ad0d0d;
	border-bottom:3px solid #000;
}
#banner{
	margin:5px;                                                
	margin-left:25px;
	float:left;
}
#funciones{
	float:left;
	position:absolute;
	left:70%;
}
#funciones li{
	padding:5px;
	font-size:18px;
	font-weight:bold;
	float:left;
	margin:5px;
	margin-top:10px;
	border:1px solid #000;
	color:#cdd3e9;
	border-radius:3px;
	background:#1e1e1e;
}
#separador{
	float:left;
	margin:5px;
	margin-top:12px;
	background:none;
	border:none;
	color:#000;
	font-size:25px;
}

y el Js:

Código PHP:

  var todo = $(document); 
todo.ready(function hoverBanner() { 
    var banner = $("#banner1").hover(function entra(){ 
        banner.attr("src","img/logoHover.png"); 
        banner.css("cursor","pointer"); 
        },function sale(){ 
            banner.attr("src","img/logo.png"); 
            }) 
}); 
 
todo.ready(function clickLogo() { 
    var banner = $("#banner1").click(function redirige(){ 
        $(location).attr("href","index.html"); 
        });     
}); 
 
todo.ready(function hoverBtn() { 
    var btn = $("#funciones li").hover(function entra(){ 
        btn = $(this); 
        btn.css("color","#1E1E1E"); 
        btn.css("background","#CDD3E9"); 
        btn.css("cursor","pointer"); 
        },function sale(){ 
            btn.css("color","#CDD3E9"); 
            btn.css("background","#1E1E1E"); 
            }); 
}); 
 
todo.ready(function clickRegistro() { 
    var btn = $("#registrar").click(function clickBtn(){ 
        $(location).attr("href","registro.php"); 
        }); 
}); 
 
todo.ready(function clickLogin(){ 
    var btn = $("#logear").click(function mostrarOculto(){ 
        var oculto = $("#formOculto").slideToggle("fast"); 
        }); 
});

dede ya un saludo y gracias ;)

Maganius · #2 (**permalink**) 26/09/2012, 14:23

overflow:hidden a la capa que hace el movimiento

unodoscuatro · #3 (**permalink**) 26/09/2012, 17:17

Cita:

Iniciado por Maganius

overflow:hidden a la capa que hace el movimiento

Gracias, aunque se sigue viendo por de arriba de la capa ToolBar.. jaja en fin un saludo!