I'm back..
Despues de unos dias decidi hacer algo mas facil..
Pero no me quedo como yo quiero..
El efecto que logro es: Click en el boton nivel 1, desaparece lentamente el div1 y abajo aparece lentamente el div2.
Lo que quiero lograr es que esten ensimados, osea uno arriba del otro, para que de el efecto que un div desaparece y el otro aparece en el mismo lugar.
Código HTML :
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-latest.js"></script>
<title>FadeIn FadeOut Div using jQuery</title>
<style>
body, input{
font-family: Calibri, Arial;
}
#sometext {
width: 150px;
height: 150px;
padding: 10px;
border:1px solid black;
background-color: #FFEE88;
}
#sometext2 {
width: 150px;
height: 150px;
padding: 10px;
border:1px solid black;
background-color:#00C;
}
</style>
</head>
<body>
<input value="nivel1" onClick="fade('sometext', this)" type="button">
<br><br>
<div id="sometext">
DIV 1
</div>
<div id="sometext2" style="display:none; ">
DIV 2
</div>
<div id="sometext3" style="display:none;">
DIV 3
</div>
<script>
function fade(div_id, button) {
if(button.value == 'nivel1') {
$('#'+div_id).fadeOut('6000');
$('#'+"sometext2").fadeIn('6000');
}
}
</script>
</body>
</html>
Me podrian ayudar???
Desde ya muchas gracias!!!!!
