[SOLUCIONADO] Cambiar texto varias veces con jquery

#1 (**permalink**) 14/07/2015, 03:34

Holas,

estoy intentando cambiar el texto superior cada vez que doy al botón, lo logro una vez, pero lo que quisiera sería que cada vez que doy al botón, son 3 pasos, me cambiara el texto, es decir, sale un texto, pulso y pasamos al siguiente paso que sale otro texto, vuelvo a pulsar y sale otro texto arriba... También me gustaría saber cómo se puede agregar una barra de progreso que a medida que avanzas se vaya rellenando.
Como he dicho lo logro una vez, pero no sé cómo se podría hacer así varias veces, el código que tengo es el siguiente:

Código:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Pornclub - Steps</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width" />
	<link rel="stylesheet" href="styles.css" type="text/css" />
	
</head>
<body>
	<div class="wrapper">
		<div id="header">
			<p>
			Texto que cambia
			</p>
		</div>
		
		<div id="quality">
			<p>hola</p>
		</div>
		<div id="picvid">
			<p>picvid</p>
		</div>
		<div id="next">
			<button type="button" id="next1"></button>
		</div>

		</div>
	</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#next1").click(function(){
	    $("#header").html("Texto que se cambia al pulsar el botón");
	 });
});
</script>
</body>
</html>

#2 (**permalink**) 14/07/2015, 06:04

como lo he solucionado:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Steps</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 href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' />
<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">

<ul id="progreso">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>


<fieldset>
<h2 class="fs-title">texto 1</h2>
</fieldset>

<fieldset>
<h2 class="fs-title">texto 2</h2>
</fieldset>
<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("ac tive");

//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)).removeCla ss("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>