Hola aprovechando que me equivoqué al crear el tema, ahora lo uso para otro problema.
He echo una animación simple con animate(), que redimensiona dos divs.
Código:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#options").click(function(event) {
event.preventDefault();
$('#capaefectos').animate({ width:'500px', height:'200px' }, 1000);
$('#capaefectos2').animate({ width:'500px', height:'40px' },1000);
$('#capaefectos').html('<div id="formulario" style="color:fff; padding:10px; width:500px; height:100px; text-align: center;"><form id="form1" name="form1" method="post" action=""><p>Nombre<label for="textfield"></label><input type="text" name="textfield" id="textfield" /><label for="textfield2"></label></p><p>Contraseña<input type="text" name="textfield2" id="textfield2" /></p><p><input type="submit" name="button" id="button" value="Enviar" /></p></form></div>');
});
$("#options2").click(function(event) {
event.preventDefault();
$('#capaefectos2').animate({ width:'500px', height:'200px' }, 1000);
$('#capaefectos').animate({ width:'500px', height:'40px' }, 1000);
$('#capaefectos').html('<a id="options"><p id="texto"><b>Clic para el login</b></p></a>');
});
});
</script>
</head>
<body>
<p></p>
<p><b>Efecto con evento animate</b></p>
<p></p>
<div id="capaefectos" style="background-color:#28C68B; color:fff; padding:10px; width:500px; height:40px; text-align: center;">
<a id="options"><p id="texto"><b>Clic para el login</b></p></a>
</div>
<p></p>
<div id="capaefectos2" style="background-color:#28C68B; color:fff; padding:10px; width:500px; height:200px; text-align: center;">
<a id="options2"><p id="texto2"><b>Clic para las características</b></p></a>
</div>
</body>
</html>Vista previa:
http://snproject.webcindario.com/jquery_animate.phpAl hacer clic en "Clic para el Login", se agranda ese div, se muestra el formulario y el otro se hace pequeño, luego al hacer clic en "Clic para las características" este se agranda y el del login vuelve al estado normal, ahí perfecto pero intentad darle a login otra vez (sin refrescar la página), no hace nada ¿porqué?
He visto, que si meto "<a id="options"><p id="texto"><b>Clic para el login</b></p></a>" fuera de un div y de todo, si funciona.., pero porqué dentro de un div no?
Gracias
SOLUCIONADO, CERRAD TEMA.
