he realizado una especie de formulario con 4 pasos y al final me ha salido bien. Lo que querría probar ahora es que en cada paso pudiera cambiar el background que está aplicado al body, es decir que al final haya 4 backgrounds distintos, uno por cada paso.
Alguien sabría cómo se puede aplicar? Mi código es:
Código:
Agradecería alguien que me orientara un poco.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Steps jquery</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
</head>
<body>
<form id="formulario">
<!-- progreso -->
<ul id="progreso">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- fieldsets -->
<!--paso 1-->
<fieldset>
<h2 class="fs-title">Texto 1</h2>
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<!--paso 2-->
<fieldset>
<h2 class="fs-title">Texto 2</h2>
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<!--paso 3-->
<fieldset>
<h2 class="fs-title">Texto 3</h2>
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<!--paso 4-->
<fieldset>
<h2 class="fs-title">Final</h2>
<input type="submit" name="submit" class="submit action-button" value="Next Step" />
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function(){
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //propiedades fieldset que vamos a animar
var animating; //
$(".next").click(function(){
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activar el siguiente paso en progreso usando el índice de next_fs
$("#progreso li").eq($("fieldset").index(next_fs)).addClass("active");
//mostrar el siguiente fieldset
next_fs.show();
//ocultar el fieldset actual con estilo
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//como la opacidad de current_fs está reducida a 0 - almacenado en "now"
//1. escala current_fs hasta 80%
scale = 1 - (1 - now) * 0.2;
//2. traer next_fs desde la derecha (50%)
left = (now * 50)+"%";
//3. aumentar la opacidad de next_fs a 1 a medida que avanza
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
},
//Esto viene del plugin easing
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//des-activar paso actual en progreso
$("#progreso li").eq($("fieldset").index(current_fs)).removeClass("active");
//mostrar el fieldset anterior
previous_fs.show();
//ocultar el fieldset actual con estilo
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. escalar previous_fs de 80% a 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
},
//Esto viene del plugin easing
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})
});
</script>
</body>
</html>
Un saludo!!!
