fadeIn

saseisa · #1 (**permalink**) 27/07/2012, 14:37

hola a todos tengo unas dudas estoy empezando a hacer pruebas con jquery soy nuevo en esto les explico un poco
tengo este codigo

Código:

$(document).ready(function(){
		$("#home").fadeIn(1000);
		$('#stagebtn, #presentationbtn, #homebtn, #contactbtn').click(function(){

		var valor=this.id;
		var cuerpo=valor.substring(0,valor.length-3);
		$('div').fadeOut(function(){
					$('#'+cuerpo).fadeIn(2500)
				});return false;

		});
		
		
	});

tengo 4 divs con sus id stage, presentation, home, contact al cargar la pagina muestra el div home, si le doy clic a los botones lo que hago (no se si es la forma correcta de programarlo) es hacer fadeOut del div y hacer fadeIn dependiendo del boton con los botones de home y presentacion no tengo problemam pero con los de stage y contact se muestra una vez hace fadeOut y se vuelve a mostrar y ya se queda el div

lo que no entiendo porque lo muestra cierra y vuelve a mostrar siendo que con home y presentation me muestra la primera vez y ya no hace fadeOut

espero puedan ayudarme desde ya gracias

emprear · #2 (**permalink**) 27/07/2012, 18:48

No estoy seguro, pero creo que lo que querés hacer es esto

Código HTML:

Ver original<!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>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
#stage, #presentation, #home, #contact {
width: 300px;
height: 100px;
margin: 10px;
background: lime;
}
 
/*]]>*/
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
        $("#home").show();
        $('#stage, #presentation, #contact').hide();
        $('#stagebtn, #presentationbtn, #homebtn, #contactbtn').click(function(){
 
        var valor=this.id;
        var cuerpo=valor.substring(0,valor.length-3);
        $('div').hide();
        $('#'+cuerpo).fadeOut(function(){
            console.log('cuerpo: ',cuerpo);
                    $('#'+cuerpo).fadeIn(2500)
                });return false;
 
        });
        
        
    });
 
//]]>
</script>
</head>
<body>
<div id="stage">
    stage
</div>
<div id="presentation">
presentation
</div>
<div id="home">
home
</div>
<div id="contact">
contact
</div>
 
<button id="stagebtn">stage</button>
<button id="presentationbtn">presentation</button>
<button id="homebtn">home</button>
<button id="contactbtn">contact</button>
</body>
</html>

Es decir, mostras por defecto home y ocultás las restantes, en el click, ocultás todas y le hacés fadeIn (el fadein automáticamente te hace el show()) solo al la capa que obtuviste en la variable cuerpo

Saludos

saseisa · #3 (**permalink**) 27/07/2012, 22:30

asi es esa es la idea que tengo, solo que oculto los divs desde css

emprear · #4 (**permalink**) 27/07/2012, 22:44

Cita:

Iniciado por saseisa

asi es esa es la idea que tengo, solo que oculto los divs desde css

El tema es que los tenés que volver a ocultar en el clikc, si la idea es esa, creo que mi ejemplo cumple el objetivo,
saludos.